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

分析設(shè)計(jì)圖

上海網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

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

代碼實(shí)例：

!DOCTYPE?html

head

meta?charset="UTF-8"?/

title布局之路-移動(dòng)端開發(fā)實(shí)例/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í)，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當(dāng)為width=device-width,即將視口設(shè)置為當(dāng)前設(shè)備的寬度。

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

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

代碼實(shí)例：

style?type="text/css"

html?{

font-size:?42px;

}

/style

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

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

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

代碼效果對(duì)比：

/*使用固定像素*/

.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ì)算是根據(jù)父級(jí)的內(nèi)容區(qū)寬度進(jìn)行計(jì)算的。

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

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

html5這個(gè)怎么做？布局如何？

1）像這樣的行內(nèi)標(biāo)記，定義它的margin-top和margin-bottom是無效的，除非你把它設(shè)置為塊狀元素才可以。Display:block

2）對(duì)于塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 DIV 等等，

3）無論什么元素，一旦設(shè)置為是浮動(dòng)顯示，就擁有了完整的盒模型結(jié)構(gòu)，我們就可以使用外邊距，內(nèi)邊距，邊框，高和寬來控制的大小以及與其他對(duì)象之間的位置關(guān)系。

4）浮動(dòng)是從網(wǎng)頁布局的角度來定義元素的顯示，而行內(nèi)和塊狀屬性主要是從元素自身的性質(zhì)來定其顯示的。

5）當(dāng)元素沒有定義邊框時(shí)，可以把內(nèi)邊距作為外邊距使用。有時(shí)候外邊距會(huì)有重疊現(xiàn)象的。

6）當(dāng)為元素定義背景圖像時(shí)，內(nèi)邊距區(qū)域內(nèi)可以顯示背景圖像，而對(duì)外邊距區(qū)域來說，背景圖像是達(dá)不到的，他永遠(yuǎn)都是透明狀態(tài)

7）用div+css設(shè)計(jì)網(wǎng)頁結(jié)構(gòu)時(shí)，設(shè)計(jì)師滿腦子都是網(wǎng)頁內(nèi)容，而非內(nèi)容所呈現(xiàn)的效果。

8）塊狀元素：不管塊狀元素寬度是多少，他總會(huì)自動(dòng)占據(jù)一行，因?yàn)樵谒┪哺郊恿艘粋€(gè)換行符，而行內(nèi)元素沒有這個(gè)特點(diǎn)。塊狀元素有完整的盒模型結(jié)構(gòu)，可以定義寬度和高度，而行內(nèi)元素沒有這個(gè)特性，無法通過高度來改變文本行的行高。

塊元素的代表標(biāo)記 div

行內(nèi)元素的代表標(biāo)記 span ，行內(nèi)標(biāo)記不具備組織結(jié)構(gòu)框架

9）網(wǎng)頁布局分為：自然布局，浮動(dòng)布局， 定位布局

10）當(dāng)一個(gè)元素被定義為浮動(dòng)顯示時(shí)，即定義為塊狀元素。并且該元素就會(huì)收縮自身體積為最小狀態(tài)。所以，應(yīng)該有個(gè)好的習(xí)慣即把浮動(dòng)元素設(shè)置高和寬。如果沒有設(shè)置，則元素會(huì)按照它所包含的內(nèi)容大小來確定它的大小。

11）當(dāng)元素浮動(dòng)后，周邊的對(duì)象會(huì)自動(dòng)環(huán)繞浮動(dòng)元素周圍，形成一種環(huán)繞關(guān)系。

12）塊狀元素之間的外邊距會(huì)有重疊現(xiàn)象，但是浮動(dòng)元素之間的外邊距不會(huì)發(fā)聲重疊現(xiàn)象。

13）浮動(dòng)元素移動(dòng)，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。

14）一般定位元素（絕對(duì)或是相對(duì)元素）都會(huì)覆蓋在文檔流對(duì)象之上。但是，select元素的窗口控件還不完全支持z-index

15）在css定位布局中，一般遵循“外部相對(duì)定位，內(nèi)部絕對(duì)定位”

16）在body中設(shè)置min-width:760px,可以避免布局重疊現(xiàn)象。

html5怎么分格局，三層

可以通過DIV來分塊布局，然后通過CSS樣式來調(diào)整大小，顏色等樣式。參考代碼如下：

!DOCTYPE html

html

head

style

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:10px;

}

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

/style

/head

body

div id="header"

h1第一層/h1

/div

div id="nav"

第二層左側(cè)

/div

div id="section"

第二層右側(cè)

/div

div id="footer"

第三層

/div

/body

/html

html5如何布局？

justify-content: space-between;

align-items: center;

這兩行放到ul上面

HTML5中響應(yīng)式布局怎么弄

步驟1 創(chuàng)建空白的HTML 5模版

首先，我們創(chuàng)建一個(gè)空白的模版，代碼很簡單，如下所示：

復(fù)制代碼

步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在頁面模版中，我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：

復(fù)制代碼

讀者可能留意到這里使用的div id=”wrapper”，這個(gè)是稍候用來做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼

1）首先往標(biāo)題中增加如下代碼：

Simple HTML5 Template

復(fù)制代碼

2）往導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個(gè)簡單的頁面分類導(dǎo)航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

復(fù)制代碼

3）使用標(biāo)簽來描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

復(fù)制代碼

4）添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來表示當(dāng)前頁面或文章的附屬信息部分，可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類似的有別與主要內(nèi)容的部分。

根據(jù)目前的規(guī)范，元素有兩種使用方法：

被包含在中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。

當(dāng)前名稱：html5如何布局,html5頁面布局怎么寫代碼
地址分享：http://chinadenli.net/article43/dsedces.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、移動(dòng)網(wǎng)站建設(shè)、軟件開發(fā)、微信公眾號(hào)、微信小程序、網(wǎng)站策劃

廣告

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