前几天在做手机端静态（tài）页面页面（miàn）的时候碰（pèng）到需要在不同的屏（píng）幕（mù）尺寸（cùn）下需要用到不（bú）同（tóng）的样式（shì）的问题，在页（yè）面中用到了这个媒（méi）体查询（xún）的方（fāng）法，现在也分享给大家。

使用 @media 查询，你可以（yǐ）针对不（bú）同的媒体（tǐ）类型定义不（bú）同的样式。 @media 可以针（zhēn）对不（bú）同的屏幕尺寸设置不同的（de）样式（shì），特别是如（rú）果你（nǐ）需要设（shè）置设计响（xiǎng）应式的页（yè）面，@media 是非常有用的（de）。当你重置浏（liú）览器大小的过（guò）程中，页（yè）面也（yě）会根据浏（liú）览（lǎn）器的宽（kuān）度和高度重（chóng）新渲染（rǎn）页面（miàn）。

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

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

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

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

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

“max-width”是（shì）媒体特（tè）性中最常用的（de）一个特性，其意（yì）思（sī）是指媒体类（lèi）型小（xiǎo）于或等于（yú）指定的（de）宽度时，样（yàng）式生效。如（rú）：

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

 .img-box { display:none; }

}

上（shàng）面（miàn）表（biǎo）示的是：当屏幕小于或等于480px时,页面中的“类”（.img-box）都将被隐（yǐn）藏。

2.最小宽度（dù）min-width

“min-width”与“max-width”相反（fǎn），指的是媒体类（lèi）型大于或等（děng）于指定宽（kuān）度时，样式（shì）生效（xiào）。

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

.wrapper{width: 980px;}

}

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

3.多（duō）个媒体（tǐ）特性使用

Media Queries可以使用关键词"and"将（jiāng）多（duō）个媒体（tǐ）特性结合在一起。也就是说，一个Media Query中可以包含0到（dào）多个（gè）表达（dá）式，表达式又可以包（bāo）含0到多个关（guān）键（jiàn）字（zì），以（yǐ）及一（yī）种媒体类型。

当屏幕（mù）在600px~900px之间时（shí），body的背景色渲染为（wéi）“#f5f5f5”，如下所（suǒ）示。

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

  body {background-color:#f5f5f5;}

}

4.设备屏（píng）幕的输出宽度Device Width

在（zài）智能设（shè）备上，例如（rú）iphoness、ipads等，还可以根据（jù）屏幕设备的尺寸来设置相应的样式（或（huò）者调用相应的样（yàng）式文件）。同样的，对（duì）于屏幕设备同样可（kě）以使（shǐ）用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

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

上面的代码指的是“iphoness.css”样式适用（yòng）于最（zuì）大设备宽度为480px，比如说iphoness上的显示，这里（lǐ）的“max-device-width”所指的是设备的实际分辨率，也就是指（zhǐ）可视面积分辨率。

5. not关（guān）键词（cí）

使（shǐ）用（yòng）关（guān）键词“not”是用（yòng）来排除某种制定的媒体类型，也就（jiù）是用来排除符合（hé）表达式的设备。换句话说，not关键词表示对（duì）后面（miàn）的表（biǎo）达式执（zhí）行取反（fǎn）操作，如：

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

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

6.only关键词

only用来指定（dìng）某种特定的媒体类型，可以用（yòng）来排除不支持媒（méi）体查询的浏（liú）览器。其实only很（hěn）多时候是用来对那些不支持Media Query但（dàn）却支持Media Type的设备（bèi）隐藏样式表的（de）。其主要（yào）有：支持媒体特性的设备，正常调用样式，此时就（jiù）当only不存在；表（biǎo）示不支持（chí）媒体特性但又支持媒体类（lèi）型的设备，这样就（jiù）会不读样式（shì），因为其先会（huì）读取only而不是（shì）screen；另外不支持（chí）Media Queries的浏（liú）览器（qì），不论是否支持only，样式都不（bú）会被采用。如

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

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

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

另外在样式中（zhōng），还可以使用多条语句来将同一个样式（shì）应用（yòng）于不同（tóng）的媒体类型（xíng）和媒体特性中，指定（dìng）方式如下所（suǒ）示（shì）。

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

上面（miàn）代码中style.css样式被用在宽度（dù）小于或等于480px的手持设备上，或者被用于（yú）屏幕（mù）宽度大于（yú）或等于960px的设备上。

到目前（qián）为止（zhǐ），CSS3 Media Queries得（dé）到了众多浏（liú）览器支持，除了（le）IE6-8浏（liú）览器不支持之（zhī）外，在所有现（xiàn）代浏览器中都可（kě）以（yǐ）完美支持。还（hái）有（yǒu）一（yī）个与众不同的是（shì），Media Queries在（zài）其（qí）他浏（liú）览器中不要像其他CSS3属（shǔ）性一样在（zài）不同的（de）浏览器中添加前缀（zhuì）。

文章中（zhōng）的部分内（nèi）容（róng）来自网络（luò），版权归原作者所有，如有侵权请联系管（guǎn）理（lǐ）员删除。