隨著智能手機(jī)的流行，越來(lái)越多的人使用手機(jī)瀏覽網(wǎng)頁(yè)。而網(wǎng)頁(yè)自適應(yīng)手機(jī)屏幕尺寸的需求也變得越來(lái)越重要。HTML5成為了現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的主流技術(shù)之一，也提供了方便的手機(jī)自適應(yīng)代碼。

//在HTML頭部添加如下代碼，設(shè)置viewport元數(shù)據(jù)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 在CSS中設(shè)置網(wǎng)頁(yè)寬度為100%，并使用媒體查詢(xún)
body {
width: 100%;
}
@media (min-width: 768px) {
// 在高于768像素的屏幕寬度中使用規(guī)則
body {
width: 768px;
}
}

首先，在HTML的頭部添加meta視口元數(shù)據(jù)，這樣可以讓瀏覽器以設(shè)備的實(shí)際屏幕寬度自動(dòng)調(diào)整網(wǎng)頁(yè)布局。這個(gè)元數(shù)據(jù)告訴瀏覽器使用設(shè)備的寬度作為頁(yè)面寬度，并且初始縮放比例要設(shè)為1.0。

接下來(lái)，在CSS樣式表中設(shè)置網(wǎng)頁(yè)整體寬度為100%，這樣就實(shí)現(xiàn)了讓頁(yè)面寬度自適應(yīng)設(shè)備。然后使用媒體查詢(xún)，指定在屏幕寬度大于768像素時(shí)，網(wǎng)頁(yè)寬度設(shè)為768像素，達(dá)到更好的顯示效果。

通過(guò)如上代碼，HTML5為你提供了簡(jiǎn)單易懂的手機(jī)自適應(yīng)代碼，讓你的網(wǎng)頁(yè)在各種設(shè)備上呈現(xiàn)更佳的可讀性和體驗(yàn)。