HTML5響應式佈局基礎（一）

HTML5響應式佈局（一）

移動端開發的佈局方式——流式佈局

流式佈局這個概念第一次接觸會覺得這個概念很高端，但是進行深入了解之後就會發現其實很簡單，有HTML桌面端網頁開發經驗基礎的人來說，實際上流式佈局就是把桌面端一些寫死的佈局改成了百分比，用於適應各種行動端的尺寸。

流式佈局通俗來講也可以稱為百分比佈局，通常包含了以下幾點:

• 寬度百分比

  寬度百分比

• 寬度百分比

• 寬度百分比

  🎜寬度百分比🎜 🎜🎜 🎜🎜🎜🎜🎜用em, 以及rem進行替換px🎜🎜🎜

• 彈性圖片 設定這些百分比的參照物是根據手機的螢幕尺寸進行適配的，透過尺寸適配達到一定的效果。

為什麼需要用到流式佈局來適應移動端？

固定像素尺寸的網頁是匹配固定像素尺寸顯示器最簡單的方法。但這種方法不是一種完全相容於未來網頁的製作方法，我們需要一些適應未知裝置的方法。固定像素尺寸（960/980）經不起未來考驗。

如何用百分比來佈局頁面？

尺寸百分比：

將網頁從固定版面修改為百分比版面：

需要牢記的公式：目標元素寬度 / 上下文元素寬度 = 百分比寬度。

PS: 這裡的上下文元素寬度所指的就是與他相關聯的父級的元素寬度，這會直接影響到子元素的寬度百分比。

位置百分比：

基本跟尺寸百分比類似，就是將原本的固定邊距或定位距離換算成百分比

例如：

跟頁左邊50px 上下文寬度320px,那就是50/320=15.625%

保留5位小數點。

em: 

em的作用一般來說就是設定字體，在其父級字體中設定的百分比，一種標準的標準類型來控制其大小的百分比，在其父級字體中。

• em的值並不是固定的；

• em會繼承父級元素的字體大小。

rem:

rem:

rem:

🎜rem:🎜🎜🎜🎜🎜🎜rem:🎜出現結構嵌套，導致父級的字體比例改變，子元素的字體會根據父級的字體改變而按比例變動，如果用em改變字體，計算量會很大，難免對開發會造成一定的負擔。 🎜🎜🎜🎜css3中推出了一種新的單位rem，這種單位只會基於HTML標籤進行變動。 🎜🎜🎜🎜🎜rem全稱為root em, em的根便是html, 也就是只根據html進行比例變化。 🎜🎜🎜

彈性圖片:

圖片設定width:100%,或background-size:100% 100%。

圖片設定閥值:max-width.

可是設定圖片的最大值和最小值。

當然流式佈局只是行動端適配的一種方式，還打不到響應式網頁的效果。之後我會向大家介紹另一種適配方式，叫做媒體查詢，兩種適配方式結合才能達到最終的響應式佈局效果。

以上就是HTML5響應式佈局基礎（一）的內容，更多相關內容請關注PHP中文網（www.php.cn）！