使用媒體查詢完成響應式設計頁面
時間：2018-09-27 來源：未知
在HTML5的應用中，響應式頁面設計是比較熱門的話題，下面通過一個例子闡述一下如何使用媒體查詢完成響應式設計。
本網頁在屏幕寬度超過800的分辨率顯示多欄布局，否則顯示單欄布局，效果如圖：
多欄布局
單欄布局
首先分析布局，多欄布局是典型的T型布局，這類布局在PC端比較常見，也非常容易做到。網頁分為上中下三個部分，即頁頭、內容和頁腳，其中內容部分又分為左右兩欄，網頁整體布局如下：
首先按照PC端布局編寫樣式，container寬度為980px，居中。導航欄使用ul實現，關鍵代碼：
#header ul{
background:#663;
height:50px;
border-radius: 5px;
text-align: center;
}
#header li{
display:inline-block;
color:white;
line-height: 50px;
margin: 0 50px;
}
main和aside使用浮動改變方向，并指定各自的寬度，關鍵代碼：
#main{
background:white;
border-radius: 5px;
width:700px;
padding: 5px;
float:left;
}
#aside{
float:right;
width:260px;
}
頁腳樣式和頁頭導航部份類似。
完成PC端布局后，使用媒體查詢編寫寬度小于800px分辨率的布局，找出關鍵點，并重寫CSS代碼。
@media screen and (max-width:800px) {
}
首先改變布局容器寬度，從固定寬度980px改為100%，去掉居中屬性。
#container{
width:100%;
margin: 0;
}
導航部分由原來的水平排列改為垂直排列，關鍵點是將原來為ul編寫的背景和圓角邊框改成為li編寫，恢復li的默認display屬性：
#header ul{
background:none;
height: auto;
}
#header li{
display:block;
margin: 5px 0;
background:#663;
border-radius: 5px;
}
接下來去掉main和aside的浮動屬性，寬度改為100%，同時將main當中的圖片改為彈性圖片：
#main,#aside{
float:none;
width:100%;
}
#main img{
max-width: 100%;
}
后修改頁腳導航，修改方式與頁頭導航欄相同。
