媒体查询media query

1.媒体查询让css可以更精确作用域不同媒体类型和同一媒体的不同条件 ；可以使用max或min表示“大于等于”，“小于等于”；可以用在css中的@media和@import规则上也可用在html和xml中

@media screen and (width:600px){…}

@import url('demo.css') screen and (width:600px)

<link media="screen and (width:600px)" rel="" href="">

<?xml-stylesheet media="screen and (width:600px)" rel="" href="">

2.使用在css中，基本格式@media  media_query,media_query…

media_query：  [only | not]? media_type(媒体类型) and expression（表达式）

3.媒体类型 常用

• all  用于所有媒体设备（所有浏览器都兼容）
• screen 用于计算即显示器（所有浏览器都兼容）
• tv  用于电视类设备
• print  用于打印机
• handheld  小型或手持设备
• projection  投影图像如幻灯片

3.媒体特性 常用

• width/height  输出设备中页面可见区域宽度/高度
• device-width/device-height  输出设备中屏幕可见宽度/高度
• orientation portrait  |  landscape   height大于等于width是前者
• aspect - radio    width与height比率
• device-aspect-ratio  device-width与 device-height比率
• color 参数整数数字，定义每组输出设备的彩色原件个数，不是彩色设备值为0
• resolution 参数分辨率，定义设备分辨率，如96dpi
• grid 参数1或0，用来查询输出设备是否使用栅格或点阵，只有1和0才是有效值，1代表是，0代表否

本文参考css手册