TA貢獻63條經驗 獲得超18個贊
學習媒體查詢做的筆記?？偨Y一下，借此復習一遍。嗯。
<link?rel="stylesheet"?href=""?media="screen">
@mmdia?all?and?(min-width:800px)?and?(orientation:landscape){?...?}上面兩個是媒體查詢的例子
媒體查詢就是對媒體類型和媒體屬性表達式求值。如果為真應用樣式，為假不應用樣式。對于link標簽的媒體查詢，求值結果為假時樣式表會被下載，只是樣式不被應用。
媒體類型
all -- 所有設備。如沒有only和not限定可以省略，省略不寫時默認為all
print -- 打印機
screen -- 計算機屏幕
等等
and & not & only & 逗號 操作符
and -- 所有媒體屬性表達式為真時，媒體查詢結果才為真。
not -- 對媒體結果求值取反。如果有逗號操作符，其作用范圍至逗號處為止
1.?
@media?not?all?and?(min-width:800px){...}等價于
@media?not?(all?and?(min-width:800px)){...}而不是
@media?(not?all)?and?(min-width:800px){...}2.?
@media?not?screen?and?(color),?print?and?(color)
等價于
@media?(not?(screen?and?(color))),?print?and?(color)
only -- ?防止不支持媒體查詢的瀏覽器錯誤應用樣式。
<link?rel="stylesheet"?href=""?media="only?screen?and?(color)"?>
?不支持媒體查詢的瀏覽器會解析成media=only，只媒體類型沒有only，所以不會被不支持媒體查詢的瀏覽器應用樣式。而如果不使用only
<link?rel="stylesheet"?href=""?media="screen?and?(color)"?>
不支持媒體查詢的瀏覽器會解析成media=screen，媒體屬性不會求值。從而錯誤地應用樣式。
, ?-- ?逗號相當于or（或者）
常用媒體屬性
width : 可視寬度
height : 可視高度
device-width: 設備寬度
device-height: 設備高度
orientation: 方向
aspect-ratio: 寬高比
color: 顏色
device-aspect-ratio： 設備寬高比
TA貢獻3593條經驗 獲得超0個贊
舉報