p{color:#ff0000mediatype--mediatypemediatype是css2中一个非常有用的属性。通过媒体类型，我们可以为不同的设备指定特定的样式，实现更丰富的界面。下面说说CSS3中的媒体查询是媒体类型的增强。typesofmediatype:all--foralldevicesprint--forprinterscreen--forcolorcomputermonitors(includingmobilephones,ipadandotherhandhelddevices)speech--forvoicetypes注：CSS2.1和CSS3媒体查询定义tty、tv、projection、handheld、braille、embossed、aural等媒体类型，但是在mediaquery4中都被丢弃了，所以不推荐使用mediatype：第一种方法：的media属性p{color:#ff0000第三种：@importmethod第四种：style中的某些样式指定media@mediaspeech{p{color:#ff0000}}注意：如果不指定media，则默认为allmediaquery--mediaquerymediaquery是通过不同的媒体类型和条件定义不同的样式表，mediaquery允许CSS更准确地针对不同媒体类型和同一媒体的不同条件采取行动。它也是媒体类型的增强。语法媒体查询由媒体类型和一个或多个用于测试媒体特性的表达式组成。表达式和媒体类型将根据实际情况评估为真或假。如果指定的媒体类型与当前设备匹配并且媒体属性表达式都为真，则当前媒体查询为真。@mediascreenand(min-width:700px)and(orientation:landscape){}/*其中screen为媒体类型，min-width:700px为媒体特征表达式*/logicaloperatorandoperator--forcombinationMultiplemediafeatures(mediafeature)toamediaquery@mediascreenand(min-width:700px)and(orientation:landscape){.name{颜色：红色；}}当设备类型为屏幕，且视口宽度大于700px，且设备可视区域宽度大于高度（横屏）时，花括号内的样式会取只有三个条件都满足才有效。逗号(,)运算符——用于组合多个媒体query@media(min-width:700px),screenand(orientation:landscape){.name{color:red;}}上面代表两种不同的设备，一种是所有，一种是屏幕，用逗号隔开。not运算符——用于否定整个媒体查询，必须在媒体查询的开头@medianotalland(monochrome){}等价于：@medianot(alland(monochrome)){}注意：not它是否定整个媒体查询，而不是否定单个媒体特征的唯一运算符——它用于指定一种特殊的媒体类型。对于支持MediaQuery的设备，如果有only关键字，浏览器会忽略only关键字，直接按照下面的表达式应用样式文件。对于不支持MediaQuery但可以读取MediaType的浏览器，当只遇到关键字时，该样式文件将被忽略。@mediaonlyscreenand(min-width:400px)and(max-width:600px){}不支持媒体查询但支持媒体类型的网络浏览器将省略以下样式文件。上面的例子被解释为：@mediaonly{}支持媒体查询的Web浏览器将省略only关键字。上面的例子解释为：@mediascreenand(min-width:400px)and(max-width:600px){}mediafeature--下面是mediafeature一些mediafeature，不是所有的width--定义宽度ofthevisibleareaof??thepageofthevisibleareaintheoutputdeviceheight--定义页面可见区域在输出设备中的高度device-width--定义输出设备屏幕的可见宽度device-高度——定义输出设备屏幕的可见高度方向——定义“高度”是否大于或等于“宽度”。portrait表示yes（竖屏），landscape表示no（横屏）aspect-ratio--定义宽高比，可以设置min/maxdevice-aspect-ratio--定义device-width和device-高度。可以设置最小值/最大值。比如常见的displayratios:4/3,16/9,16/10resolution--定义设备的分辨率。可以设置最小值/最大值。如：96dpi、300dpi、118dpcmcolor——定义每组输出设备的彩色原稿数量。如果它不是彩色设备，则该值等于0。可以设置min/maxmediaquery常用的方法是exclusive（排他）保证在某个条件下只有一个样式表生效，严格划分查询条件，如下：@media(max-width:400px){html{背景：红色；}}@media(min-width:401px)and(max-width:800px){html{background:green;}}@media（最小宽度：801px）{html{背景：蓝色；}}overriding你可以为元素设置相同的优先级，使用样式顺序，并通过重写@media(min-width:400px){html{background:red;来避免排他性。}}@media（最小宽度：600px）{html{背景：绿色；}}@media（最小宽度：800px）{html{背景：蓝色；}}Mobilefirst（移动优先）默认样式假设为移动设备的宽度，然后扩展样式由min-widthhtml{background:red;控制}@media（最小宽度：600px）{html{背景：绿色；}}PCpriority(desktopfirst)样式默认设置为宽屏，样式被max-width控制样式覆盖html{background:red;}@media(max-width:600px){html{background:green;}}参考：http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.htmlhttps://segmentfault.com/a/1190000002812335http://blog.csdn.net/ruoyiqing/article/details/39208707
