css3 @media 實現響應式佈局

時間 2019-12-08

標籤 css3 css media 實現響應佈局欄目 CSS 简体版

原文原文鏈接

使用css3的@media，能夠實現針對不一樣媒體、不一樣分辨率的響應式佈局。css

方法1：根據不一樣分辨率使用不一樣css文件html

例如佈局

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="middle.css" />

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

方法2：同一css文件中，根據不一樣分辨率使用不一樣樣式spa

.first {background-color: white;}
.second {background-color: black;}

@media screen and (max-width: 800px) {
 /*當屏幕尺寸小於800px時，應用下面的CSS樣式*/
    .first {background-color: green;}
    .second {background-color: skyblue;}
}

@media screen and (max-width: 480px) {
 /*當屏幕尺寸小於480px時，應用下面的CSS樣式*/
    .first {background-color: yellow;}
    .second {background-color: red;}
}