前端響應式佈局

兩個模糊概念

    什麼是響應式佈局?什麼是自適應佈局?兩者區別是什麼?

  1. 自適應佈局通過檢測視口分辨率,來判斷當前訪問的設備是:PC 端、平板、手機、從而請求服務層,返回不同的頁面;響應式佈局通過檢測視口分辨率,針對不同客戶端在客戶端做代碼處理,來展現不同的佈局和內容。

  2. 自適應佈局需要開發多套界面,而響應式只需要開發一套界面就可以了。

  3. 自適應對頁面做的屏幕適配是在一定範圍:比如 PC 端一般要大於 1024px,手機端要小於 768px。而響應式佈局是一套頁面全部適應。

  4. 自適應佈局如果屏幕太小會發生內容過於擁擠。而響應式佈局正是爲了解決這個問題而衍生出的概念,它可以自動識別屏幕寬度並作出相應的調整變化。

響應式佈局實現方案

  1. 媒體查詢

    關於 css3 媒體查詢,可以針對不同的媒體類型定義不同的樣式,當視口分辨率發生變化時,頁面也會根據其變化重新渲染頁面,這裏涉及到一個問題,如何確定媒體查詢的分割點?

    如何選擇屏幕大小的分割點,這裏我們可以參考 bootstrap 的分割方案

    通過一個簡單的表格查看 bootstrap 的網格系統在各種屏幕和設備上的細節約定:

  2. 百分比佈局

    根據視圖高寬計算具體百分比,從而實現響應式的效果。這裏會涉及到一個棘手的問題,計算困難,設計稿上元素的高寬需換算成百分比,工作量大。

  3. rem 佈局

    rem 單位是相對於根元素 html 的 font-size 來決定大小,當視圖容器大小發生變化,需同步動態改變 font-size 的大小,兩種實現方式:

  1. 視口單位

    css3 中新的單位,與視圖窗口有關,vw 視圖的寬度,vh 視圖的高度

ku6gYT

使用 vw 作爲 css 單位,將 px 換算成 vw,下面以 scss 爲例:
$vm_base: 700;
@function vw($px) {
  @return  ($px / $vm_base) * 100vh;  
}
// 假設元素在視覺稿中,寬度和高度爲500px,字體大小爲14px
.main {
    width: vm(500);
    height: vm(500);
    font-size: vm(14);
}
  1. 圖片響應式

使用 max-width(圖片自適應)

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

inline-block 元素相對於周圍元素是內聯的,max-widt` 保證圖片最大顯示爲其自身的 100%,height 爲 auto 保證圖片進行等比縮放而不失真。

使用 srcset

<img srcset="test001.jpg 1x, test002.jpg 2x" src="test003.jpg" alt="">

如果屏幕的 dpi = 1 則加載 1 倍圖,dpi = 2 則加載 2 倍圖,如果不支持 srcset 則默認加載 src 裏面的圖片。

使用 backrgound-image 通過媒體查詢控制加載不同圖片

最後

    在實際項目中,目前使用較多的是使用媒體查詢作爲佈局的基礎,使用 rem 做字體的適配,用 srcset 來做圖片的響應式,寬度可以用 rem,flex 等來實現響應式,使用視口單位 vm/vh 做響應式佈局也挺多。

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/EBz-Rd2k09MmFbAtDbjpOg