HTML5如何利用rem實現(xiàn)自適應(yīng)布局

分析設(shè)計圖

創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、小程序設(shè)計、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10年以來，已經(jīng)為上1000家成都玻璃貼膜各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的上1000家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

假設(shè)設(shè)計圖大小為1080px。這也就意味著，在開發(fā)時，需要兼容的最大分辨率為1080px，最小的為320px。

2.?調(diào)整視口

代碼實例：

!DOCTYPE?html

head

meta?charset="UTF-8"?/

title布局之路-移動端開發(fā)實例/title

meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/

link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/

/head

body

div?class="wrap"/div

/body

/html

代碼解析：由于使用不同設(shè)備打開網(wǎng)頁時，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當(dāng)為width=device-width,即將視口設(shè)置為當(dāng)前設(shè)備的寬度。

3. 確定設(shè)計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當(dāng)移動端頁面寬度為320px時，要保證最小字體為12px，那么在1080px的設(shè)計圖中，最小字體應(yīng)當(dāng)為42px。

代碼實例：

style?type="text/css"

html?{

font-size:?42px;

}

/style

4. 按照設(shè)計圖的像素進行開發(fā)

按照正常網(wǎng)頁開發(fā)流程，進行網(wǎng)頁開發(fā)即可。

5. 使用百分比和rem替換px

代碼效果對比：

/*使用固定像素*/

.box?{

float:?left;

width:?658px;

font-size:?72px;

text-align:?center;

line-height:?195px;

}

/*使用百分比和rem*/

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

代碼解析：

水平方向的值，將具體像素調(diào)整為百分比。百分比的計算是根據(jù)父級的內(nèi)容區(qū)寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那么子元素轉(zhuǎn)換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據(jù)父級計算，當(dāng)標(biāo)簽結(jié)構(gòu)級別不同時，計算公式中的“分母”也有所不同，在開發(fā)時這個地方很容易出現(xiàn)問題，請務(wù)必注意。

垂直方向的值，將具體像素調(diào)整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標(biāo)簽當(dāng)前的字體大小為42px，將行高轉(zhuǎn)換為rem單位，即195/42= 4. 64rem。

這種HTML5布局是什么意思？

這個就是簡單的html布局，里面有html 標(biāo)簽組成，你可以標(biāo)簽里面添加內(nèi)容然后用瀏覽器打開，就能看到渲染的html 頁面了。

為什么要用HTML5結(jié)構(gòu)標(biāo)簽來布局網(wǎng)頁

對于HTML5來講，在網(wǎng)頁結(jié)構(gòu)上標(biāo)簽定義與使用更加語義化，讓搜索引擎以及工程師更加迅速理解當(dāng)前網(wǎng)頁的整個重心所在！

列舉常用HTML5結(jié)構(gòu)組合

header

nav

section

article

figure

figcaption

aside

footer

一般首頁結(jié)構(gòu)，如圖所示

當(dāng)然也可以是下面的結(jié)構(gòu)

其中section和article最為相似，而且和div標(biāo)簽貌似也有很大相似之處。

但看似相似，并不是真的相似，這些標(biāo)簽是為了布局而生的，自然有它們更精確的語義定位，或者說他們更將強調(diào)Html的語義。

DIV

這個標(biāo)簽一直是我們見得最多、用得最多的標(biāo)簽。

它本身無任何語義，用作布局以及樣式化標(biāo)簽。

Section

與div相似，但它有更進一步的語義。

section用作一段有專題性的內(nèi)容，一般在它里面會帶有標(biāo)題。 ?section典型的應(yīng)用場景應(yīng)該是文章的章節(jié)、標(biāo)簽對話框中的標(biāo)簽頁、或者論文中有編號的部分。

Article

article是一個特殊的section標(biāo)簽，它比section具有更明確的語義, 它代表一個獨立的、完整的相關(guān)內(nèi)容塊。

div、section、article，語義是從無到有，逐漸增強的。

div無任何語義，僅僅用作樣式化或者腳本化的標(biāo)簽，對于一段主題性的內(nèi)容，則就適用section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨立存在的一段內(nèi)容，則就適用 article。

原則上來說，能使用article的時候，也是可以使用section的，但是實際上，假如使用article更合適，那么就不要使用section。

網(wǎng)站欄目：html5頁面布局,html5頁面布局模板
轉(zhuǎn)載來源：http://chinadenli.net/article41/dsihohd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航、軟件開發(fā)、網(wǎng)站收錄、、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)