需求
在日常的樣式編寫中鸿摇，對(duì)于瀏覽器寬度變化的時(shí)候，我們?yōu)榱嗽黾芋w驗(yàn)捐康，總是需要根據(jù)變化進(jìn)行響應(yīng)式的樣式設(shè)置。
本篇章編寫一個(gè) media 的瀏覽器寬度響應(yīng)示例庸蔼。
media 使用說明
@media 類型 and (條件1) and (條件二){*/
css樣式*/
}
上面寫的類型有很多種解总，不過我們一般只需要認(rèn)識(shí)一下屏幕的變化即可，示例如下：
/* 如果文檔寬度小于 300 像素則修改背景顏色(background-color): */
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
這是一個(gè)最典型根據(jù)屏幕的寬度變化姐仅，來設(shè)置樣式的示例花枫。
下面我們來繼續(xù)豐富這個(gè)示例刻盐，根據(jù)不同的瀏覽器寬度，變化 body 的背景色劳翰。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*@media 類型 and (條件1) and (條件二){*/
/* css樣式*/
/*}*/
/*Extra small 當(dāng)瀏覽器的最大寬度為 <576px, 則設(shè)置 body 背景色為 red*/
@media only screen and (max-width:576px) {
body{
background-color: red;
}
}
/*Small 當(dāng)瀏覽器的最大寬度為 ≥576px, 則設(shè)置 body 背景色為 blue*/
@media only screen and (min-width:576px) {
body{
background-color: blue;
}
}
/*Medium 當(dāng)瀏覽器的最大寬度為 ≥768px, 則設(shè)置 body 背景色為 cyan*/
@media only screen and (min-width:768px) {
body{
background-color: cyan;
}
}
/*Large 當(dāng)瀏覽器的最大寬度為 ≥992px, 則設(shè)置 body 背景色為 greenyellow*/
@media only screen and (min-width:992px) {
body{
background-color: greenyellow;
}
}
/*Extra large 當(dāng)瀏覽器的最大寬度為 ≥1200px, 則設(shè)置 body 背景色為 sandybrown*/
@media only screen and (min-width:1200px) {
body{
background-color: sandybrown;
}
}
</style>
</head>
<body>
<div style="margin-top: 10px">
<span>響應(yīng)式樣式：Extra small敦锌，當(dāng)瀏覽器的最大寬度為 <576px, 則設(shè)置 body 背景色為 red</span>
<div style="display: inline-block;width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ccc; background: red;"></div>
</div>
<div style="margin-top: 10px">
<span>響應(yīng)式樣式：Small，當(dāng)瀏覽器的最大寬度為 ≥576px, 則設(shè)置 body 背景色為 blue</span>
<div style="display: inline-block;width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ccc; background: blue;"></div>
</div>
<div style="margin-top: 10px">
<span>響應(yīng)式樣式：Medium佳簸，當(dāng)瀏覽器的最大寬度為 ≥768px, 則設(shè)置 body 背景色為 cyan</span>
<div style="display: inline-block;width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ccc; background: cyan;"></div>
</div>
<div style="margin-top: 10px">
<span>響應(yīng)式樣式：Large乙墙，當(dāng)瀏覽器的最大寬度為 ≥992px, 則設(shè)置 body 背景色為 greenyellow</span>
<div style="display: inline-block;width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ccc; background: greenyellow;"></div>
</div>
<div style="margin-top: 10px">
<span>響應(yīng)式樣式：Extra large，當(dāng)瀏覽器的最大寬度為 ≥1200px, 則設(shè)置 body 背景色為 sandybrown</span>
<div style="display: inline-block;width: 15px; height: 15px; border-radius: 50%; border: 1px solid #ccc; background: sandybrown;"></div>
</div>
</body>
</html>
效果如下：
GIF 2020-6-30 15-11-26.gif
