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

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

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

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

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

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

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

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