響應式布局
一個網站能夠兼容多個終端，並且在各個終端都可以很好展示體驗。
媒體類型
在何種設備或者軟件上將頁面打開
|
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
|
<link rel
=
'stylesheet' href
=
'css/01.css' media
=
'all and (min-width:600px)'
/>
|
寫在樣式表頭部
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style
>
@ import url (01. css ) (min -width :400px ) ; @ import url (02. css ) (min -width :600px ) ; @ import url (03. css ) (min -width :800px ) ; @ import url (04. css ) (min -width :1000px ) ; body { margin : 0 ; } div { height : 100px ; background -color : #f00 ; border : 1px solid #000 ; box -sizing : border -box ; float : left ; } </style > |
https://www.w3.org/2010/05/video/mediaevents.html
常用的幾種屏幕寬度設定：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@media screen and
(min
-width
: 1200px
)
{
css -code ; } @media screen and (min -width : 960px ) and (max -width : 1199px ) { css -code ; } @media screen and (min -width : 768px ) and (max -width : 959px ) { css -code ; } @media screen and (min -width : 480px ) and (max -width : 767px ) { css -code ; } @media screen and (max -width : 479px ) { css -code ; } |