传统的CSS只支持数量有限的设备显示规则，如：all、screen、print、handheld、television和projector。这些对于设备的尺寸、方向或分辨率没有任何的定论。CSS2.1及以上的版本提供给了媒体查询技术（media queries）来让我们控制各种设备的不同样式。
&link rel="stylesheet" href="styles.css"&
&link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="styles_h.css" /&
在上面的代码中，styles_h.css将只会被用于设备显示器屏幕并且最大的宽度为480像素。注意这是设备的宽度，如果你希望浏览器的大小在480像素时用某个样式表来显示，应该使用下面的语法：
&link rel=stylesheet media="only screen and (max-width: 480px)" href="styles_small.css" /&
上面的这个样式规则可以同时在小屏幕的智能手机和缩小为480像素的桌面浏览器上使用，这样做是一个非常好的选择。然而，为每一个设备和屏幕尺寸都写一个单独的样式表是非常不现实的。当浏览器加载页面的时候，不管当前的屏幕分辨率是说明，它都会调用所有的样式表文件。过多的HTTP请求将会拖慢你的网页加载速度。通常更好的做法是将所有的样式表都放到一个style.css文件中，然后通过媒体查询技术（media queries），使用@media语法来适配各种设备和屏幕分辨率。
/* standard CSS rules read by all devices and applicable to all resolutions */
html, body { }
@media print {
/* specific CSS rules for print, added only if they conflict with the rules above */
@media only screen and (max-width : 1200px) {
/* style rules for desktops and laptops with smaller screens, again only added if the rules here conflict with those at the topof the stylesheet */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
@media only screen and (max-width : 480px) {
你需要注意的是，这些“breakpoints”不应取决于流行的设备的尺寸，而是由你的网站的需要来决定。
即使不使用@media媒体查询，一个设计为流式布局的响应式网站在浏览器缩小或小屏幕设备上也会被正确的缩放。如果你发现显示不正确，可以查看&head&中的&meta&标签是否书写正确。
&meta name="viewport" content="width=device-width, initial-scale=1"&
最后需要注意的是，媒体查询是可以嵌套的：
@media screen {
body { background: yellow }
@media (min-width: 0px) {
body { background: green }
IE浏览器和Safari 6.1之前的浏览器不支持嵌套媒体查询。
本文版权属于jQuery之家，转载请注明出处：CSS3媒体查询(@media)详细总结和Responsive浅谈
一直想对CSS3的媒体查询和Responsive进行一下记录和总结，今天拿出点时间来做一下。
媒体查询的历史
随着浏览器终端的多样化，无法保证一个网页在不同的设备上呈现出想同的结果，所以Media Query诞生了，让一个页面适用不同的终端。
Media Query早在CSS2的时候就出现，CSS2用&link /&标签，而CSS3用@media定义的CSS里面。两者用法类似，但是CSS3与CSS2相比会减小页面的请求。
媒体类型（Media Tyep）
媒体类型也是一个挺重要的属性，CSS2里就很常见，可以通过媒体类型指定不同的样式。
用于所有设备
已废弃。用于语音和声音合成器
已废弃。 应用于盲文触摸式反馈设备
已废弃。 用于打印的盲人印刷设备
已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
用于打印机和打印预览
projection
已废弃。 用于投影设备
用于电脑屏幕，平板电脑，智能手机等。
应用于屏幕阅读器等发声设备
已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
已废弃。 用于电视和网络电视
其中，Screen、All、Print这三个最常用。
媒体类型引用方法
实际的媒体引用方法有十几种，但是主要的有4种。
1.link方法
&link type="text/css" href="xxx.css" media="screen"&
&link type="text/css" href="xxx.css" media="print"&
&?xml-stylesheet rel="stylesheet" media="screen" href="xxx.css"&
@import url(xxx.css)
@import url(xxx.css)
@media screen{...}
以上几种方法各有利弊，建议用link和@meida这两种方法。
媒体特性（Media Query）
可以将Media Query看成“Meida Type（判断条件） + CSS（符合条件的样式规则）”
&link rel="stylesheet" media="screen and (min-width:1024px)"&
@media screen and
(min-width:1024px){
aspect-ratio
定义输出设备中的页面可见区域宽度与高度的比率
定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index
定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio
定义输出设备的屏幕可见宽度与高度的比率。
device-height
定义输出设备的屏幕可见高度。
device-width
定义输出设备的屏幕可见宽度。
用来查询输出设备是否使用栅格或点阵。
定义输出设备中的页面可见区域高度。
max-aspect-ratio
定义输出设备的屏幕可见宽度与高度的最大比率。
定义输出设备每一组彩色原件的最大个数。
max-color-index
定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio
定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height
定义输出设备的屏幕可见的最大高度。
max-device-width
定义输出设备的屏幕最大可见宽度。
max-height
定义输出设备中的页面最大可见区域高度。
max-monochrome
定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution
定义设备的最大分辨率。
定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio
定义输出设备中的页面可见区域宽度与高度的最小比率。
定义输出设备每一组彩色原件的最小个数。
min-color-index
定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio
定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width
定义输出设备的屏幕最小可见宽度。
min-device-height
定义输出设备的屏幕的最小可见高度。
min-height
定义输出设备中的页面最小可见区域高度。
min-monochrome
定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution
定义设备的最小分辨率。
定义输出设备中的页面最小可见区域宽度。
monochrome
定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation
定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution
定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
定义电视类设备的扫描工序。
定义输出设备中的页面可见区域宽度。
浏览器兼容性
CSS3 media query 兼容性
@media 媒体类型 and (媒体特性) ｛样式代码｝
媒体特性书写分两个部分，第一个部分是媒体特性，第二个部分为媒体特性的值，两个部分之间用:隔开。如：
@media screen and (max-width:1024px) and (min-width:300px){
div{color:}
媒体类型可省略，默认为all。
响应式（Responsive）设计
有了CSS的媒体查询这个功能，自然有了所谓的响应式。
响应式历史
由Ethan Marcotte在A List Apart发表了率先发表了响应式的创新文章，奖三种开发技术整合起来（弹性网格布局、弹性图片、媒体和媒体查询），将其命名为RWD（Responsive Web Design 响应式网页设计）。
1.设置Meta标签
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
meta标记使用方法：
&meta name="viewport" content="" /&
content属性值如下，这些属性值主要用来处理可视区域。
设置layout viewport
的宽度，为一个正整数，或字符串”width-device”
initial-scale
设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数
设置layout viewport
的高度，这个属性对我们并不重要，很少使用
user-scalable
是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
通常会这样写：
&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&
2.兼容IE JS
因为IE9才支持CSS3，所以需要对IE9以下版本进行兼容处理。
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
(function(l,f){function m(){var a=e.return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createEh.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentEc.innerHTML="x&style&article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}&/style&";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^&|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="&xyz&&/xyz&";j="hidden"invarif(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.d&h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='&&style media="'+a+'"& #mq-test-1 { width: 42 }&/style&',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document);
(function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length&b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g&j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.for(var o=0;n&o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")&-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:font-size:1width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i&p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)&-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)&-1?t||s():1)),w.hasquery&&(z&&A||!(z||m&=x)||!(A||y&=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this);
3.设置IE渲染方式默认为最高
&meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"&
chrome=1,双核时，默认使用chrome内核。
4.接下来就可以写CSS3媒体查询样式了
博客名称：
博客地址：
CSDN博客地址：
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？2797人阅读
媒体查询能使我们根据设备的各种功能特性来设定相应的样式。
如下面代码：
&link rel=&stylesheet& media=&screen and (orientation:portrait)& href=&portrait-screen.css&/&
引用某一样式表。主要看media属性。
首先，媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。任何纵向放置的显示屏设备都会加载
portrait-screen.css样式表，其他设备则会忽略。
在媒体查询开头追加not则会颠倒改查询的逻辑。
&link rel=&stylesheet& media=&not screen and (orientation:portrait)& href=&portrait-screen.css&/&还可以这样用，
限制只有视口宽度大于800像素的显示屏设备才会加载文件
&link rel=&stylesheet& media=&not screen and (orientation:portrait) and (min-width:800px)& href=&portrait-screen.css&/&
往深处延伸，可以用逗号来表示或运算，只要满足其中一个即可。
当然除了媒体查询不仅用于引用css样式表，也可以写到样式表中
@media screen and (max-device-width:400px){
h1{color:green}
@media screen and (max-device-width:960px){
h1{color:red}
并且更有些丧心病狂的用法是在css样式表中用@import指令在当前样式表中引用其他样式表。例如
@import url(&phone.css&) screen and (max-width:360px)
但是切记使用css的@import方式会增加HTTP请求（这会影响加载速度），所以请谨慎使用该方法。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：344513次
积分：4056
积分：4056
排名：第7381名
原创：93篇
转载：29篇
评论：126条
(4)(1)(3)(2)(2)(1)(4)(1)(1)(3)(2)(1)(3)(1)(11)(5)(20)(15)(11)(8)(5)(2)(3)(1)(2)(2)(1)(2)(5)(2)