http://www.lampbrother.net
移动端H5知识普及 - CSS3媒体查询
前些日子，趁平日空隙书写了类库系列，这几天就来“普及”一下移动端HTML5开发的小知识吧~！虽然知识小，但是不得不承认的是，它们很重要~！
本系列共6篇文章，如下为标题列表：
• 1 谈谈相对单位
• 2 什么是视口
• 3 CSS3媒体查询
• 4 移动端“百变”盒模型
• 5 移动端“背景”妙用
• 6 移动端fixed定位模式
• 第三篇 CSS3媒体查询（CSS3 media query）
我们每个人都有自己的属性，例如年龄、性别、身高、体重等。作为媒体（电脑、手机、电视、电话），也有它们的特性。CSS3针对所有的媒体均定义了width、color等媒体特性。作为媒体特性本身，其作用并没有什么，但是对于我们来说，我们可以通过检测媒体的特性确定不同的媒体，从而执行相应处理。那么此时就涉及到了我们的媒体查询~
http://www.lampbrother.net
媒体查询是一些逻辑表达式，用于计算用户浏览器中媒体特性的当前值，如果媒体查询表达式计算的结果为true，则应用其所包含的CSS规则。
常见viewport数值
• braille ——触觉反馈设备
• embossed ——盲文印刷设备
• handheld ——小型或手持设备
• print ——打印机
• projection ——投影图像，如幻灯
• screen ——计算机显示器
• speech ——语音合成器
• tty ——打字机
• tv ——电视类
• 根据不同设备加载不同样式 demo
有条件地应用样式
http://www.lampbrother.net
1.
7. 有条件地加载样式表
1.
2.
3.
4.
5.
6. 媒体特性
http://www.lampbrother.net
• width 布局视口宽度 • height 布局视口高度
• device-width 设备屏幕宽度
• device-height 设备屏幕高度
• orientation 设备方向
• aspect-ratio 视口宽高比
• device-aspect-ratio 屏幕宽高比
• resolution 设备像素密度
• 根据不同媒体特性加载不同样式 demo
有条件的应用样式
1. 5. 有条件的加载样式表
1.
2.
3.
4.
5. 结束~！
href=\"wide.css\" media=\"screen and (min-
and (max-
media=\"screen href=\"mobile.css\"
