響應式佈局 一個網站能夠相容多個終端，並且在各個終端都可以很好展示體驗。 媒體類型 在何種設備或者軟體上將頁面打開 123456789 all：所有媒體braille：盲文觸覺設備embossed：盲文印表機print：手持設備projection：印表機預覽screen：彩屏設備speech：'聽 ...
響應式佈局
一個網站能夠相容多個終端，並且在各個終端都可以很好展示體驗。
媒體類型
在何種設備或者軟體上將頁面打開
|
1 2 3 4 5 6 7 8 9 |
all：所有媒體 braille：盲文觸覺設備 embossed：盲文印表機 print：手持設備 projection：印表機預覽 screen：彩屏設備 speech：'聽覺'類似的媒體類型 tty：不適用像素的設備 tv：電視 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#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;} } |
關鍵字
and：連接媒體類型和媒體特性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@media all and (min-width:1201){ } not：關鍵字是用來排除某種制定的媒體類型 @media not tv only：只有在特定的某種設備上識別 @media only tv 媒體特性 min-width：當屏幕大小 大於等於 某個值的時候識別 max-width：當屏幕大小 小於等於 某個值的時候識別 orientation：橫豎屏（portrait/landscape） @media (orientation:portrait) { //豎屏的時候 div{ background-color: yellow; } } @media (orientation:landscape) { //橫屏的時候 div{ background-color: green; } } |
豎屏/橫屏檢測的原理是通過可視區的寬度和高度之間的比例進行檢測的。但在移動端中可能會出現問題，比如點擊一個文本輸入框的時候，會彈出鍵盤，這個鍵盤會影響屏幕可是區域的寬高，這種情況會造成豎屏/橫屏檢測錯誤。
樣式引入方式
樣式表末尾添加
| 1 | @media all and (min-width:600px){ } |
link標簽
| 1 |
<li
  更多相關文章
一周排行
 所有分類
|