浅淡移动Web开发

来源:网站建设 2014-02-28

1. 响应式web设计

说 到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多 数电脑能正常显示的固定宽度居中显示,后者则采用百分比。关于这两者讨论的文章很多,有兴趣的自己查阅下,我今天要介绍的就是相信你已经听过的”响应式布 局”,响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。

响应式web设计并非新的技术,只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起,并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样,将已有的技术重新组合发挥新的作用。

2.CSS3新增属性

现在移动端两大阵营ios和android都是基于webkit内核的,而webkit内核对CSS3的支持走在了前面,在这里我们可以抛开翔一样的ie家族,尽情享受多彩绚丽CSS3世界吧!

CSS3 给我们带来了如:文字阴影(text-shadow)、盒子阴影(box-shadow)、圆角(border-radius)、背景渐变 (background: linear-gradient(#000, #fff))、2D变换(transition)、动画(animation)等大家耳熟能详的常用属性外,还有如-webkit-mask、 -webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、 -webkit-box-reflect、-webkit-marquee、-webkit-box等webkit内核私有属性,至于这些属性其他浏览器 支持程度,有兴趣的可以自己研究研究,这上面的每一个属性都有自己的使用场景,就看如何灵活运用。