前几天在（zài）做手（shǒu）机端静态页面页面的时（shí）候碰到需要（yào）在不（bú）同（tóng）的（de）屏幕尺寸下需要用到不同的样式的问题，在（zài）页面中用到了这个媒体查（chá）询的方法，现在也分享给大（dà）家。

使（shǐ）用 @media 查询（xún），你可以针对不同的媒体（tǐ）类型定（dìng）义不同的样式。 @media 可以针对（duì）不同的（de）屏幕尺寸设置（zhì）不（bú）同的样式，特别（bié）是（shì）如果你需要设置（zhì）设计响（xiǎng）应式的（de）页面，@media 是非常有（yǒu）用的。当你重置浏览器大小（xiǎo）的过程中（zhōng），页面也会根据（jù）浏览器的宽度和（hé）高度重（chóng）新渲染页面。

Media Queries有（yǒu）其自己的使用规则。具体来说,Media Queries的使（shǐ）用方法如下：

相关格式：@media 媒体类型and （媒体特（tè）性）{你的（de）样式}

注意（yì）：使（shǐ）用Media Queries必须要使用“@media”开头（tóu），然（rán）后指定媒（méi）体类（lèi）型（也可以称为设（shè）备类型），随后是指定媒体（tǐ）特性（xìng）（也可以称之为设备特性）。媒体特（tè）性的（de）书写方式和（hé）样（yàng）式的书写（xiě）方式非常相似，主要分为（wéi）两个部分，第一个部分指的是媒（méi）体特性，第二（èr）部分为媒体特（tè）性（xìng）所（suǒ）指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)
媒体类（lèi）型和媒体特性（xìng）就不（bú）在这里细（xì）说了，大家可以查阅资料（liào），主要有10种（加上all是11种（zhǒng））媒体类型和13种媒（méi）体特性（xìng），将其组合就类似于不（bú）同（tóng）的CSS集（jí）合。
但与CSS属（shǔ）性不同的是（shì），媒体（tǐ）特（tè）性是通过min/max来表示大于等于或小于（yú）做为逻（luó）辑判（pàn）断，
而不是使用小（xiǎo）于（<）和大于（>）这样的符（fú）号来判断。接下来（lái）一起来看看（kàn）Media Queries在实际项目（mù）中常用的（de）方（fāng）式。

1. 最大宽度（dù）max-width

“max-width”是媒体特性中（zhōng）最常（cháng）用的一（yī）个特性，其意思是（shì）指媒（méi）体（tǐ）类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){

 .img-box { display:none; }

}

上面表示的（de）是：当屏幕小（xiǎo）于或等于480px时,页面中的“类”（.img-box）都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于（yú）指定宽度时，样式生（shēng）效。

@media screen and (min-width:900px){

.wrapper{width: 980px;}

}

上（shàng）面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.多个媒体特性使用

Media Queries可以使用关键词"and"将多个（gè）媒体特（tè）性结合（hé）在一起。也就是说（shuō），一个Media Query中可以（yǐ）包含0到多个表达式，表达式（shì）又可以包含0到多个（gè）关键字（zì），以及一种媒体类型。

当（dāng）屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如（rú）下（xià）所示。

@media screen and (min-width:600px) and (max-width:900px){

  body {background-color:#f5f5f5;}

}

4.设（shè）备屏幕的输出宽度Device Width

在智能设备上（shàng），例如iphoness、ipads等，还可以（yǐ）根据屏幕设（shè）备的尺寸来设置相应的样（yàng）式（或者调（diào）用相应的样式文件）。同样的，对于屏幕（mù）设备同样可以（yǐ）使（shǐ）用“min/max”对应参（cān）数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphoness.css" />

上（shàng）面的代码（mǎ）指的是“iphoness.css”样式（shì）适用于最大设备宽度为480px，比如说iphoness上（shàng）的显示，这里的“max-device-width”所指的（de）是设（shè）备的实际分辨率，也就是（shì）指可视面积分辨（biàn）率。

5. not关键词

使用关键（jiàn）词“not”是（shì）用来排除某种（zhǒng）制定的媒体类型，也就是用来排除符合表达式的设备（bèi）。换句话说，not关键词表示对后面（miàn）的表达式执（zhí）行取（qǔ）反操作，如：

@media not print and (max-width: 1200px){样式代（dài）码}

上面代码表示的是：样（yàng）式（shì）代码将被使用在除打（dǎ）印设备和设（shè）备宽度小于1200px下（xià）所有（yǒu）设（shè）备中。

6.only关键（jiàn）词

only用来指（zhǐ）定（dìng）某种（zhǒng）特定的媒体类型，可以（yǐ）用（yòng）来（lái）排（pái）除不支持媒体查询的浏览器。其实only很多（duō）时候是（shì）用来对那些不支（zhī）持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体（tǐ）特性的设备，正常（cháng）调用样式，此时就当（dāng）only不存在；表示不支持（chí）媒体特性但又支持媒体类型的设备，这样就会不读样式，因（yīn）为其（qí）先会读取（qǔ）only而不是screen；另外不支持Media Queries的浏览器，不论是否支（zhī）持only，样式都不会被采（cǎi）用。如（rú）

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="androids240.css" />

在Media Query中如（rú）果没有明确（què）指定Media Type，那（nà）么其默认为all，如：

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外（wài）在样式中，还可以（yǐ）使（shǐ）用多条语句来将（jiāng）同一个样式应用于不同（tóng）的（de）媒体类型和媒体特（tè）性中（zhōng），指定（dìng）方式如下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代（dài）码中style.css样式被用在宽度小于或等于480px的手（shǒu）持设备（bèi）上（shàng），或者被用于屏幕宽度大于或等于960px的设备上。

到目前为止，CSS3 Media Queries得到了众多（duō）浏（liú）览器（qì）支持，除了IE6-8浏览器不（bú）支持之外（wài），在（zài）所有现代浏览（lǎn）器（qì）中都可以完美支持。还（hái）有一个与众不同的是，Media Queries在（zài）其他浏览（lǎn）器中不要像其他CSS3属性一样在不同（tóng）的浏览（lǎn）器中（zhōng）添加（jiā）前缀。

文（wén）章（zhāng）中的部分内容来自网络，版权（quán）归原作者所（suǒ）有，如有（yǒu）侵（qīn）权请联系管理员删除。