toc

Intro

最近在学习和使用twitter bootstrap框架，涉及到响应式布局，因此将css3的设备类型相关知识整理下。

css2.1中也可以为不同的设备设计不同的css，通过

开定义不同设备的css，但是只有很少的设备支持。

而随着移动互联网的兴起，css3提出了媒体查询Media Queries 的概念。

Media Queries可以获得

• 浏览器窗口的宽和高
• 设备的宽和高
• 设备的手持方向，横向还是竖向
• 分辨率

@media的用法介绍

语法为@media: {sRules }

：指定设备名称，

• all
• aural 语音和音乐合成器
• Braille 触觉反馈设备
• embossed 凸点字符（盲文）印刷设备
• handheld 小型或者手提设备
• print 打印机
• projection 投影图像，如幻灯片
• tty 使用固定间距字符格的设备，如某些终端设备
• tv 电视类设备

{sRules}：定义样式表

media_query: [only | not ]? <media_type> [ and ] * expression: ( <media_feature> [: ]?) media_type: all | aural | braille | handheld | print | project | screen | tty | tv | embossed media_feature : width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid

• media_query 设置逻辑关键字，and、not、only
• media_type 设置设备类型
• media_feature 定义媒体特性，特性放置在圆括号。

详细的Media Queries 媒体特性说明

最后注意得是

1.关键词 only的用处为：对于不支持Media Queries但是认识Media type的浏览器（譬如ie8只支持@media screen）进行样式屏蔽

譬如

  @media only screen and (max-width:1024px) { }

的样式代码对于上述浏览器因为不认识only（only在screen前面）所以忽略后面所带样式。

2.media Queries 也支持外部css的引入

@import url(color.css) screen and (min-width:1000px)