生活随笔
收集整理的這篇文章主要介紹了
“约见”面试官系列之常见面试题之第八十五篇之css响应式（建议收藏）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
響應(yīng)式布局
一個(gè)網(wǎng)站能夠兼容多個(gè)終端，并且在各個(gè)終端都可以很好展示體驗(yàn)。
媒體類(lèi)型
在何種設(shè)備或者軟件上將頁(yè)面打開(kāi)
| 1
2
3
4
5
6
7
8
9 | all：所有媒體
braille：盲文觸覺(jué)設(shè)備
embossed：盲文打印機(jī)
print：手持設(shè)備
projection：打印機(jī)預(yù)覽
screen：彩屏設(shè)備
speech：'聽(tīng)覺(jué)'類(lèi)似的媒體類(lèi)型
tty：不適用像素的設(shè)備
tv：電視 |
| 1
2
3
4
5
6
7
8
9
10
11
12
13 | #box{width:100px;height:100px;background-color:red;}
@media embossed{
? ??/*盲文打印機(jī)是綠色*/
? ? #box{background-color:green;}
}
@media tv{
? ??/*在tv上是粉色*/
? ? #box{background-color:pink;}
}
@media all{
? ??/*在所有媒體上是紅色*/
? ? #box{background-color:red;}
} |
關(guān)鍵字
and：連接媒體類(lèi)型和媒體特性
| 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：關(guān)鍵字是用來(lái)排除某種制定的媒體類(lèi)型
@media not tv
? ? ? ? only：只有在特定的某種設(shè)備上識(shí)別
@media only tv
? ? ? ? 媒體特性
? ? ? ? min-width：當(dāng)屏幕大小 大于等于 某個(gè)值的時(shí)候識(shí)別?
? ? ? ? max-width：當(dāng)屏幕大小 小于等于 某個(gè)值的時(shí)候識(shí)別
? ? ? ? orientation：橫豎屏（portrait/landscape）
@media?(orientation:portrait)?{?//豎屏的時(shí)候
? ? div{?background-color:?yellow;?}
}
@media?(orientation:landscape)?{?//橫屏的時(shí)候
? ? div{?background-color:?green;?}
} |
豎屏/橫屏檢測(cè)的原理是通過(guò)可視區(qū)的寬度和高度之間的比例進(jìn)行檢測(cè)的。但在移動(dòng)端中可能會(huì)出現(xiàn)問(wèn)題，比如點(diǎn)擊一個(gè)文本輸入框的時(shí)候，會(huì)彈出鍵盤(pán)，這個(gè)鍵盤(pán)會(huì)影響屏幕可是區(qū)域的寬高，這種情況會(huì)造成豎屏/橫屏檢測(cè)錯(cuò)誤。
樣式引入方式
樣式表末尾添加
| 1 | @media all and?(min-width:600px){??} |
link標(biāo)簽
| 1 | <link rel='stylesheet'?href='css/01.css'?media='all and (min-width:600px)'??/> |
寫(xiě)在樣式表頭部
| 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> |
?
常用的幾種屏幕寬度設(shè)定：
| 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;
} |
本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?
總結(jié)
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第八十五篇之css响应式（建议收藏）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
