移動手機網站的趨勢不容小看，隨著科技的發(fā)展，越來越多的智能手機蜂擁而出，互聯網科技從此也要崛起。今天的教程介紹下，頁面如何自動適應屏幕。其實這個功能現在做起來很簡單，以下操作步驟和解決方案。
首先是css代碼實例篇
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
@media (max-width:800px){
#change-color {
width:90%;
height:300px;
margin:50px auto;
background:blue;
}
}
這段css可以分作兩個部分，寫好代碼之后我們可以發(fā)現，剩下的內容也是對#change-color 的定義，只是跟上面略有不同，一個是寬度發(fā)生了變化，一個是背景色改了。那么現在我們來解釋一下這部分代碼。
默認情況執(zhí)行第一部分的定義，那么背景色就應該是紅色的，寬度是300px。一切如同我們與想的一樣。當瀏覽器內容部分的寬度小于等于800px（符合條件，最大寬度為 800px）時，使用第二部分的定義，也就是寬度變成了90%，背景色變成了藍色。
然后我們看看實際效果：當網頁寬度大于800px
網頁自適應寬屏
然后調整窗口寬度到內容區(qū)域小于800px。
冀公網安備 13100302000566號
Sitemap地圖 ? 網站地圖 Rss訂閱