關(guān)于響應(yīng)式頁(yè)面制作方法發(fā)布者：本站     時(shí)間：2020-05-21 19:05:33

所謂響應(yīng)式頁(yè)面，就是能夠用一套樣式，使你的頁(yè)面能夠在不同分辨率的屏幕下都有很好的表現(xiàn)形式。響應(yīng)式Web設(shè)計(jì)，這個(gè)概念是Ethan Marctte 在A List Apart 發(fā)表的一篇文章“Responsive Web Design”中援引響應(yīng)式建筑而得名：

響應(yīng)式建筑（responsive architecture），物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行相應(yīng)。

根據(jù)我所閱讀過(guò)一些文章及資料，我總結(jié)出響應(yīng)式頁(yè)面的幾個(gè)關(guān)鍵組成部分：

1、頁(yè)面頭部的meta說(shuō)明，可以通過(guò)viewport meta標(biāo)簽去讓你的html頁(yè)面的的寬度能根據(jù)設(shè)備分辨率讓瀏覽器的可視寬度來(lái)適應(yīng)，也可以在這里設(shè)置頁(yè)面的縮放比例等等，這樣在成比例的分辨率設(shè)備下，就可以更簡(jiǎn)單地實(shí)現(xiàn)響應(yīng)式。

<meta name=“viewport” content=“width=device-width， initial-scale=1.0”>

2、流體布局（fluid grid），所謂的流體布局，其實(shí)就是在你pc端實(shí)現(xiàn)的頁(yè)面基礎(chǔ)上，將一些元素的寬高由原來(lái)的固定多少像素（px）調(diào)整為百分比（%）或字體比例（em）（或布局方面的margin、padding、left、top等以px為單位的值），這也是當(dāng)前實(shí)現(xiàn)響應(yīng)式布局的兩種主要實(shí)現(xiàn)方法。

第一種用百分比（%），就是以該元素的父容器的寬高為100%，其他元素的寬高相對(duì)于其父容器的比例，只要將具體的像素值相對(duì)于他的父容器的一個(gè)百分比折算即可。當(dāng)然這種方法的換算有點(diǎn)復(fù)雜，因?yàn)楹芏嘞鄬?duì)的寬高折算的百分比系數(shù)是帶小數(shù)的，所以這時(shí)候可能要你有足夠的耐心才能實(shí)現(xiàn)。