關于響應式頁面制作方法發布者：本站     時間：2020-05-21 19:05:33

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

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

根據我所閱讀過一些文章及資料，我總結出響應式頁面的幾個關鍵組成部分：

1、頁面頭部的meta說明，可以通過viewport meta標簽去讓你的html頁面的的寬度能根據設備分辨率讓瀏覽器的可視寬度來適應，也可以在這里設置頁面的縮放比例等等，這樣在成比例的分辨率設備下，就可以更簡單地實現響應式。

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

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

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