all 所有媒体braille 盲文触觉设备embossed 盲文打印机PRint 手持设备projection 打印预览screen 彩屏设备speech '听觉'类似的媒体类型tty 不适用像素的设备tv 电视
Demo:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width:100px; height:100px; background-color:red; } @media embossed{ /*盲文打印机是绿色*/ #box{ background-color:green; } } @media tv{ /*在tv上是粉色*/ #box{ background-color:pink; } } @media all{ /*在所有媒体上是红色*/ #box{ background-color:red; } } </style> </head> <body> <div id="box"></div> </body></html>二、关键字
and : 连接
@media all and (min-width:1000px)
only : 某种特定的媒体类型
@media only screen
not : 关键是用来排除某种特定的媒体类型
@media not tv
/*@media only 设备类型 只有在某种特定的设备上 识别*//* @media only screen{ 仅仅在彩屏设备下识别 #demo{ background:blue; }}
*//*当屏幕大于等于500像素的时候*//* @media all and (min-width:500px){ #demo{ background:green; }} *//*当屏幕小于等于500像素的时候*/@media all and (max-width:900px){ #demo{ background:yellow; }}
三、横屏、竖屏
提示：这只是初步的监测，但不是最好的，后期有讲解最新的
/*竖屏*/@media (orientation:portrait){ div{ background:yellow; }}/*横屏*/@media (orientation:landscape){ div{ background:blue; }}
四、CSS 引入
第一种
<link rel="stylesheet" type="text/css" href="a1.css" media="all and (min-width:400px)" /><link rel="stylesheet" type="text/css" href="a2.css" media="all and (min-width:600px)" />
第二种
<style type="text/css">@import url(a1.css) (min-width:400px);@import url(a2.css) (min-width:600px);
</style>
新闻热点
疑难解答
