天天看點
傳回

盤點：響應式布局的5種實作方式

作者：艾程式設計
響應式布局：隻需要開發一套代碼，隻需要一套代碼使頁面适應不同的螢幕。

響應式設計通過檢測視口分辨率，針對不同用戶端在用戶端做代碼處理，來展現不同的布局和内容；

盤點：響應式布局的5種實作方式

響應式布局的 5 種實作方案

  • 百分比布局
  • 媒體查詢布局
  • rem 響應式布局
  • vw 響應式布局
  • flex 彈性布局

一、百分比布局

比如，當浏覽器的寬度或者高度發生變化時，通過百分比機關可以使得浏覽器中的元件的寬和高随着浏覽器的變化而變化，進而實作響應式的效果。

  • height、width 屬性的百分比依托于父标簽的寬高。但是 padding、border、margin 等屬性的情況又不一樣

  • 1、子元素的 top 和 bottom 如果設定百分比，則相對于直接非 static 定位（預設定位）的父元素的高度，同樣，子元素的 left 和 right 如果設定百分比，則相對于直接非 static 定位（預設定位的）父元素的寬度。

    2、子元素的 padding 和 margin 如果設定百分比，不論是垂直方向或者是水準方向都相對于直接父親元素的 width，而與父元素的 height 無關。

  • border-radius 為百分比，則是相對于自身的寬度

缺點：

計算困難，如果我們要定義一個元素的寬度和高度，按照設計稿，必須換算成百分比機關。

二、媒體查詢布局

通過@media 媒體查詢，可以通過給不同螢幕的大小編寫不同的樣式來實作響應式的布局。

響應式缺點：如果浏覽器大小改變時，需要改變的樣式太多，那麼多套樣式代碼會很繁瑣。

<style>
 .box {
   width: 500px;
   height: 500px;
   background-color: aqua;
}
 @media screen and (max-width: 1280px) {
   .box {
     width: 400px;
     height: 400px;
  }
}
 @media screen and (max-width: 980px) {
   .box {
     width: 300px;
     height: 300px;
  }
}
 @media screen and (max-width: 765px) {
   .box {
     width: 200px;
     height: 200px;
  }
}
</style>
<body>
 <div class="box"></div>
</body>

1、在實際開發中，常用的響應斷點門檻值設定

（括号後面是樣式的縮寫）

  • <576px （Extra small）
  • >=576px （Small --- sm）
  • >=769px （Medium --- md）
  • >=992px （Large --- lg）
  • >=1200px （X-Large --- xl）
  • >=1400px （XX-Large ---- xxl）

2、在實際開發中，常用的兩種适配方案

  • a、移動端 到 PC 端适配原則 （min-width 從小到大） 
<style>
 body {
   background-color: #000;
}
 @media screen and (min-width: 576px) {
   body {
     background-color: red;
  }
}
 @media screen and (min-width: 769px) {
   body {
     background-color: yellow;
  }
}
 @media screen and (min-width: 992px) {
   body {
     background-color: blue;
  }
}

 @media screen and (min-width: 1200px) {
   body {
     background-color: green;
  }
}
 @media screen and (min-width: 1400px) {
   body {
     background-color: orange;
  }
}
</style>
  • b、PC 端 到 移動端适配原則 （max-width 從大到小） 
<style>
 body {
   background-color: #000;
}
 @media screen and (max-width: 1400px) {
   body {
     background-color: red;
  }
}
 @media screen and (max-width: 1200px) {
   body {
     background-color: yellow;
  }
}
 @media screen and (max-width: 992px) {
   body {
     background-color: blue;
  }
}

 @media screen and (max-width: 769px) {
   body {
     background-color: green;
  }
}
 @media screen and (max-width: 576px) {
   body {
     background-color: orange;
  }
}
</style>

3、在實際開發時，@media 會結合删格系統一起來使用，實作真正意義上的響應式開發。

  • 栅格布局+斷點設定 實作響應式 
@media screen and (min-width: 576px) {
 .col-sm-1 {
   grid-area: auto/auto/auto/span 1;
}
 .col-sm-2 {
   grid-area: auto/auto/auto/span 2;
}
 .col-sm-3 {
   grid-area: auto/auto/auto/span 3;
}
……

因代碼過長，完整代碼與檔案 可進入粉絲群擷取 ！

三、rem 布局

1、rem 如何适配

  • rem 是相對于 html 根元素的字型大小的機關。
  • 我們通過修改 html 中 font-size 的字型大小來控制 rem 的大小。

比如：

html {
 font-size: 10px;
}
.box {
 width: 10rem;
 height: 20rem;
}
  • 當 html 中 font-size: 10px; 時，此時 1rem = 10px，是以 box 盒子的寬高分别為：100px 和 200px;
  • 當我們把 html 中 font-size: 20px; 時，此時 1rem = 20px,此時 box 盒子的寬高就為 200px 和 400px;

2、實際開發中如何适配，如何将設計稿對應的 px 機關轉換為 rem 機關

  • 在實際的開發中，我們通常會以 750px 的移動端設計稿來開發。
  • 我們在代碼寫完後，統一會把所有 px 機關全部轉成 rem 來實作。

在 px 機關下，一個盒子的樣式如下：

.box {
 width: 700px;
 height: 500px;
 font-size: 20px;
 padding: 10px;
 background-color: red;
}

如果我們把總寬 750px 分成 10rem，些時 1rem = 75px; ，轉成對應的 rem 機關，就是用對應的 px/75px，得到如下結果。

.box {
 width: 9.3333rem;
 height: 6.6667rem;
 font-size: 0.2667rem;
 padding: 0.1333rem;
 background-color: red;
}
  • 以上機關的轉換，我們可以利用 vscode 的插件 px to rem 來自動實作。
  • 把所有代碼全部寫完，然後一次性用 px to rem 插件轉換成 rem 機關

3、接下來如何适配不同的浏覽器，實作等比例的縮放呢 ？

  • 比如現在有 5 個同尺寸的螢幕 （750 640 480 375 320），所有螢幕整體寬分成 10rem
  • 那我們就需要分别得到這幾種不同螢幕下對應的 html 根元素的 font-size 大小了。
螢幕尺寸 html 中 font-size 大小 （1rem 大小）
750px 75px
640px 64px
480px 48px
375px 37.5px
320px 32px
  • 我們可以通過 js 來動态修改不同螢幕尺寸下的 font-size 大小就可以實作等比例放大和縮小了
  • js 動态修改 html 根元素的 font-size 的大小，能适配不同尺寸的螢幕，不再局限于這 5 種

  • <script>

    initPage();

    function initPage() {

    var clientWidth =

    document.documentElement.clientWidth || document.body / clientWidth; //擷取螢幕可視區寬

    var html = document.getElementsByTagName("html")[0]; //擷取html根元素

    html.style.fontSize = clientWidth / 10 + "px"; //動态設定font-size大小

    }

    window.onresize = initPage;

    </script>

注：

我們可以用 flexible.js 插件來幫我們實作

  • flexible 原理就是根據不同的螢幕寬度動态的設定網頁中 html 根節點的 font-size
  • 然後咱們将所有的 px 用 rem 來代替，這樣就實作了不同大小的螢幕都适應相同的樣式了。

四、vw、vh 響應式布局

vw 和 vh 分别相對的是視圖視窗的寬度和視口窗的高度。

  • 100vw = 視圖窗寬度 ，100vh = 100 視圖窗高度
  • 如果移動端有 5 個不同的視口寬尺寸 750 ，640，480，375，320，則在不同尺寸下，對應的 1vw 的 px 值如下表
  • 移動端尺寸1vw750px7.5px640px6.4px480px4.8px375px3.75px320px320px
    • 我們在實際開發時，隻需要按其中的某一個尺寸來的 px 機關的設計稿來開發就好（一般是以 750px 的大小為主）
    • 代碼全部開發好後，我們再利用 vscode 的插件 px to vw 來實作機關的自動轉換。

案例： 寬為 750px 設計稿下的某個元素樣式如下

<style>
 body {
   margin: 0;
}
 .box {
   width: 750px;
   height: 300px;
   background-color: red;
}
</style>
<body>
 <div class="box"></div>
</body>

轉換為 vw 後的代碼如下：

<style>
 body {
   margin: 0;
}
 .box {
   width: 100vw;
   height: 40vw;
   background-color: red;
}
</style>
<body>
 <div class="box"></div>
</body>
  • 在寬為 750px 的設計稿下，把 px 轉換為 vw，是用 px/7.5 得到對應的 vw 機關值
  • 轉換好後，vw 是自動應視口寬的，是以就達到了響應式開發的效果。

五、flex 彈性布局

彈性布局是一種十分友善的，隻需要依賴于 CSS 樣式的實作響應式布局的方式，也是最多用到的一種實作響應式的方法。

彈性布局在父、子元素上都有相對應的屬性來規範子元素在父元素中的 “ 彈力 ”。
  • 在父元素上，我們經常會用到的有關彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個屬性分别從 主軸的方向、是否換行、項目在主軸上的對齊方式、項目在交叉軸上的對齊方式、項目在多根軸線上的對齊方式來規範了項目在父元素中的彈性。
  • 在子元素上，我們經常會用到的有關彈性布局的屬性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，這幾個屬性分别從 項目的排序、項目放大比例、項目縮小比例、項目占據主軸空間、單個項目在交叉軸上的對齊方式來規範了項目自身的彈性。
盤點：響應式布局的5種實作方式

如果你才開始學前端，可以看看，我們這裡有html+css階段完整教程，我們在釘釘群裡有全套的課程包含（入門到精通課程、4個綜合項目（稱之為15天訓練營，在群裡是從第二十三節課開始的）、30個練習案例！）如果需要，可以掃描下方連結，添加我，邀請你進入釘釘群學習！

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的部落格-艾程式設計

響應式布局 實作方式
上一篇: 昨晚納指從PowellQ&amp;A開始爆拉，漲超4%，原因還是Powell說話太鴿了：圖二是之前的minutes，圖三
下一篇: 《2022中國企業數智化轉型更新服務産業圖譜2.0版》重磅釋出

繼續閱讀