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>
新聞熱點
疑難解答
