首頁 > web前端 > H5教程 > 主體

HTML5響應式佈局基礎(一)

黄舟
發布: 2017-02-07 13:41:13
原創
2360 人瀏覽過

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)!




相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!