最近在做公司官网，需要适配移动端，所以结合以前的知识和网上找到的相关资料，供大家参考.举个栗子：这个media属性的值表示：当页面宽度小于等于到600px，调用solution_schoolNet.css样式表渲染页面即可。媒体声明包含的内容：1.screen：这个不用多说，大家都知道，指的是一种媒体；2.and:叫做关键字，类似not,only，后面会介绍；3.(max-width:600px)：这个就是mediafeature，通俗点说就是mediacondition。使用css表示：@mediascreenand(max-width:375px){div{width:100%}}常用的媒体查询如下表所示：下面我们来看看MediaQueries的具体用法：1.最大宽度MaxWidth意思如上：当屏幕小于等于375px时，solution_schoolNet.css样式将用于呈现网页。2.最小宽度MinWidth3.多个媒体查询使用MediaQuery可以组合多个媒体查询，也就是说一个MediaQuery可以包含0到多个表达式,表达式可以包含0到多个关键字和媒体类型。如上所示，当屏幕在414px-736px（6splus）之间时，使用style.css样式渲染网页。4.设备屏幕的输出宽度DeviceWidth上面的代码表示iphone.css样式适用于最大设备宽度480px。比如iPhone上的显示，其中max-device-width是指设备的实际分辨率，即可见区域的分辨率5.iPhone4以上样式是专门为iPhone4移动设备编写的。6.iPad大多数情况下，移动设备iPad上的Safari和iPhone上的是一样的，唯一不同的是iPad声明中指定了不同的orientations.例如，在上面的示例中，portrait.css用于以纵向模式呈现页面；landscape.css用于以横向模式呈现页面。七、android//240px宽度//360pxwidth//480px宽度我们可以通过mediaquery为不同分辨率的android手机提供特定的样式，这样就可以解决android手机由于屏幕分辨率不同导致的页面重构问题。八、not关键字not关键字用于排除某些指定的A换句话说，媒体类型用于排除与表达式匹配的设备。9.唯一关键字only用于定义一个某些特定的媒体类型可以用来排除不支持媒体查询的浏览器。实际上，only常用于对不支持MediaQuery但支持MediaType的设备隐藏样式表。主要包括：对于支持MediaQueries的设备，正常调用该样式，此时只视作不存在；对于不支持MediaQueries但支持MediaType的设备，这将不读取样式，因为它只读取first而不是屏幕；另外，不支持MediaQqueries的浏览器，不管只支持还是不支持，该样式都不会被采用。10.其他如果MediaQuery中没有明确指定MediaType，则默认为all，如：其他方面：-webkit-min-device-pixel-ratio为1.0:1.所有非RetinaMac2。所有非RetinaiOS设备3.AcerIconiaA5004。SamsungGalaxyTab10.15.SamsungGalaxyS-webkit-min-device-pixel-ratio为1.3：GoogleNexus7-webkit-min-device-pixel-ratio为1.5:1.GoogleNexusS2.SamsungGalaxySII3.HTCDesire4.HTCDesireHD5.HTCIncredibleS6.HTCVelocity7.HTCSensation-webkit-min-device-pixel-ratiois2.0:1.iPhone42.iPhone4S3.iPhone54.iPad(3rdgeneration)5.iPad46.allRetina显示MAC7.GoogleGalaxyNexus8.GoogleNexus49.GoogleNexus1010.SamsungGalaxySIII11.SamsungGalaxyNoteII12.SonyXperiaS13.HTCOneXdevice-aspect-ratio语法：device-aspect-ratio：值：：指定比例说明：定义输出设备屏幕可见宽度与高度的比例。与往常一样，显示器屏幕比例：4/3、16/9、16/10该特性接受min和max前缀，因此可以导出两个媒体特性，min-device-aspect-ratio和max-device-aspect-ratio.一般示例：@media屏幕和(device-aspect-ratio:4/3){...}@importurl(example.css)屏幕和(min-device-aspect-ratio:4/3);版本支持：IE9及以上浏览器开始支持示例：mediafeaturesdevice-aspect-ratio_CSS参考手册_Web前端-end开发参考手册系列divclass="test">当您将输出设备的屏幕分辨率设置为16:10时，此行的文字将显示为红色屏幕并且(min-aspect-ratio:13/8){}移动设备显示sizeencyclopedia@mediascreenand(min-width:212px){/213px显示样式LGOptimusOne/}@mediascreenand(min-width:319px){/320px显示样式Apple4/4S/5C/5SblackberryZ30/}@mediascreenand(min-width:359px){/360pxdisplaystyleSonyZ1/}@mediascreenand(min-width:383px){/384pxDisplaystyleBlackberryZ10GoogleNexus6LGOptimusG/}@mediascreenand(min-width:399px){/399pxDisplaystyleSamsunggalaxyNote/}@mediascreenand(min-width:414px){/414px显示样式Apple6plus/}@mediascreenand(min-width:423px){/424pxdisplaystyleLG4X/}@mediascreenand(min-width:479px){/480pxdisplayScreenstyleSonyMT27iXperiasola/}@mediascreenand(min-width:539px){/640pxDisplaystyleMotorolaDroid3/4/RazrAtrix4g/}@mediascreenand(min-width:639px){/640pxdisplay屏幕风格/}@mediascreenand(min-width:640px){/640px以上的显示样式/}参考地址：http://www.w3cplus.com/content/css3-media-queries
