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