移動端開發的兩種主流方案之一：響應式布局相容
- 内容沒有受到(螢幕寬度)明顯影響時，自适應寬高即可
- 内容受到明顯的影響時，改變布局，來保證内容的清晰
響應式布局：用于解決不同浏覽器，不同分辨率及不同裝置的不同顯示效果
優點：
- 面對不同分辨率的裝置靈活性很強
- 能夠快捷的解決多裝置顯示适應的問題
缺點：
- 相容各種裝置工作量大，效率低，頁面加載時間長
- 一定的程度上，會改變網站原有的布局結構，可能會出現使用者混淆問題
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>響應式布局</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
/*width:600px;*/
/*height: 600px;*/
/*border: 1px solid;*/
/*開啟合模型*/
display: flex;
/*兩端對齊*/
justify-content: space-around;
/*換行*/
flex-flow: wrap;
}
.box1{
width:100px;
height: 100px;
background-color: #00BCD4;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
/*@media 聲明關鍵字
*screen 裝置類型
*and 關鍵字（連接配接 指定）
* () 媒體特性(就是螢幕尺寸)
* {} 指定的樣式
*
當screen 的螢幕尺寸符合 指定的尺寸時，執行指定的樣式
max-width：螢幕小于等于指定的尺寸時觸發 (最多)
min-width：螢幕大于等于指定的尺寸時觸發 (最少)
聲明要寫在元素之後 這個順序很總要 在前在後有優先級 下面優先級高
max min同時使用時min-width500px大于500px max600px 小于600px
*/
/*外聯寫的時候先引入正常時候的樣式*/
@media screen and (max-width:700px) {
.box1{
width:40%;
/*相對于父級*/
height: 100px;
background-color: #00BCD4;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</div>
</body>
</html>
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)