css3@media 媒体查询的使用(1)

  媒体查询是向不同设备提供不同样式的一种不错的方式，它为每种类型的用户提供了更佳的体验效果，要使用媒体查询来制作网页，首先需要学习3个属性：媒体类型、媒体特性和关键词。

    1、媒体类型

    媒体类型（Media Type）在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

    在css2中W3C共列出了10种媒体类型     

值	设备类型
all	所有设备
braille	盲文触觉回馈设备
embossed	盲文打印机
handheld	便携设备
print	打印用纸或打印预览视图
projection	投影设备
screen	电脑显示器
speech	语音或音频合成器
tv	电视机设备
tty	使用固定密度字母栅格的媒介，如电传打字机和终端

    媒体类型有近10种之多，但在企业中常用的就是all、screen、print。其中引入方式常用的有两种，

    (1)  @media 方式

        使用@media的方式引入，@media 是 css3 中新引入的一个特性，称为媒体查询。

        语法：

@media 媒体类型 {
    选择器{
        /*这里写样式代码*/
    }
}

  (2) link标签引入

<link rel="stylesheet" href="style.css" media="媒体类型">

除了@media 和 link 外，还可以使用 @import、xml 等方式来引入媒体类型。

    2、媒体特性

    媒体特性（Media Query） 是css3 对媒体类型（Media Type）的增强版、其实可以将Media Query 看成“Media Type(判断条件) + css (符合条件的样式规则)”。

    W3C 给出的常用特性如下表。

属性	值	min/max	描述
device-width	length	Yes	设置屏幕的输出宽度
device-height	length	Yes	设置屏幕的输出高度
width	length	Yes	渲染界面的宽度
height	length	Yes	渲染界面的高度
orientation	portrait/landscape	Yes	横屏或竖屏
resolution	分辨率（dpi/dpcm）	Yes	分辨率
color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数

    到目前为止，css3 Media Query 得到了众多浏览器的支持，除了ie6~ie8浏览器不支持。还有一点与众不同的是Media Query 不需要像其他除css3属性一样在不同的浏览器中添加前缀。

    Media Query 能在不同的条件下使用不同的样式，使页面在不同终端设备下达到不同的渲染效果。Media Query 的语法如下：

    @media 媒体类型 and （媒体特性）{css样式}

    使用Media Query 时必须使用@media 开头，然后指定媒体类型和媒体特性。媒体特性的书写方式和样式的书写方式非常相似，如：（max-width：768px）

    将上特性表中组合就类似于不同的css集合，但于css属性不同的是，媒体特性是通过min/max来表示大于、等于或小于作为逻辑判断，而不是只用小于号 < 和大于号 > 来判断。

    3、关键词

    媒体特性有的时候不止一条，当出现多个条件的是候，就需要通过关键词连接。

    (1)    and关键词，表示同时满足这两者时生效，到达限定范围，如：

@media screen and (max-width: 1200px){/*样式代码*/}

   上面代码表示的是，样式代码将被使用在电脑显示器和屏幕小于1200px的所有设备中。

    (2)    only 关键词，用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器，其实only很多时候用来对不支持Media Query 却支持 Media Type 的设备隐藏样式表，例如：ie8能成功解读媒体类型，但是却无法解读 and 后面的媒体特性语句，就会连带媒体类型一起忽略。为了让不识别媒体特性的浏览器依然识别媒体类型，可以使用only关键词进行选择，如：

<link rel="styleheet" href="style.css" media="only screen and (max-width: 760px)" />

    (3)    not 关键词，用来排除某种指定的媒体类型，也就是排除符合表达式的设备，如：

@media not print and (max-width: 1200px) {/*样式代码*/}

上面代码表示的是，样式代码将被使用在除打印机设备和屏幕小于1200px外的所有设备中。