浅淡HTML5移动Web开发.pdf

: .
浅淡 HTML5 移动 Web 开发
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择
native app 和 web app 还争论了一番，最后综合考虑，我们选择了 web（我们选择了 h5）开发。但
从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，
只是简单罗列下本人开发遇到的问题和最终的解决方案。
1. 响应式 web 设计
说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在 PC
端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度
居中显示，后者则采用百分比。关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的
就是相信你已经听过的”响应式布局”，响应式布局意味着媒体查询，这个在 css2 就已经出现的东
西随着 html5、css3 的到来又增添了新的生机。
响应式 web 设计并非新的技术，只不过将已有的开发技巧（弹性布局、弹性图片和媒体查询等）
整合在了一起，并命了这个听起来很牛 X 的名字——响应式 web 设计。犹如当年的 Ajax 一样，将已
有的技术重新组合发挥新的作用。
（1）.媒体查询初探。媒体查询并非新出现的技术，如下：
其中就使用了媒体查询，通过 标签的 media 属性为样式表指定了设备类型，当然 CSS3 时代的媒
体查询更加丰富。 : .
发现了他们的区别吗？对，不只是针对设备进行适配，而且加了一个条件，就是当设备纵向放置
的时候才匹配，咱们再看一个。
大家会发现我们又拓展了一个条件，对，就是当设备屏幕的宽度大于 960px 才会加载
样式文件。我们究竟有哪些特性是可以被探测到的呢？下面列了一部分供大家参考（参考自
媒体查询）：
- width 视口宽度
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度
- orientation 检测屏幕处于横屏还是竖屏
- aspect-ratio 基于视口的宽高比例
- device-aspect-ratio 基于设备屏幕的宽高比
- color 颜色的位数，如 min-color：32 匹配设备是否有 32 位或以上的颜色