CSS 可以通過(guò)媒體查詢來(lái)識(shí)別移動(dòng)端,實(shí)現(xiàn)不同屏幕尺寸下的樣式展示。
@media screen and (max-width: 768px) {
// 在寬度小于等于 768px 的情況下應(yīng)用以下樣式
body {
font-size: 14px;
}
.header {
height: 50px;
}
}
在上面的代碼中,可以看到媒體查詢語(yǔ)法包括 @media 關(guān)鍵字,指定設(shè)備類型的 screen 和判斷設(shè)備寬度的 (max-width: 768px)。當(dāng)瀏覽器視窗的寬度小于等于 768px 時(shí),body 元素的字體大小為 14px,.header 元素的高度為 50px。
需要注意的是,移動(dòng)端樣式的設(shè)計(jì)應(yīng)該以響應(yīng)式布局為主,而不是簡(jiǎn)單地根據(jù)設(shè)備類型和屏幕尺寸判斷。因?yàn)橥瑯拥脑O(shè)備可能會(huì)有不同的分辨率、瀏覽器,甚至是不同的橫豎屏狀態(tài),所以需要靈活地應(yīng)對(duì)不同的情況。