當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

“约见”面试官系列之常见面试题之第八十五篇之css响应式（建议收藏）

發布時間：2023/12/10 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 “约见”面试官系列之常见面试题之第八十五篇之css响应式（建议收藏）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?

響應式布局

一個網站能夠兼容多個終端，并且在各個終端都可以很好展示體驗。

媒體類型

在何種設備或者軟件上將頁面打開

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

常用的幾種屏幕寬度設定：

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;
}

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第八十五篇之css响应式（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。