盤點：響應式布局的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 ，這幾個屬性分別從項目的排序、項目放大比例、項目縮小比例、項目占據主軸空間、單個項目在交叉軸上的對齊方式來規范了項目自身的彈性。

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

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

　node節點

動距離

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

根節點

有兩種特殊的文檔屬性可用來訪問根節點：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個屬性可返回存在于XML以及HTML文檔中的文檔根節點(html標記)。

第二個屬性是對HTML頁面的特殊擴展,提供了對<body>標簽的直接訪問(body標記)。

窗口尺寸、工作區尺寸

可視區尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫法：

document.documentElement.clientWidth || document.body.clientWidth;

可視區尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性寫法：

document.documentElement.clientHeight || document.body.clientHeight;

獲取瀏覽器窗口水平滾動條的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性寫法：

document.documentElement.scrollLeft || document.body.scrollLeft;

獲取瀏覽器窗口垂直滾動條的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已經支持documentElement對象的各種屬性, 而

以上兼容性寫法不影響所獲的屬性值

編寫自定義函數：

// 獲取瀏覽器窗口的可視區域的寬度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 獲取瀏覽器窗口的可視區域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響

在線咨詢

上一篇：HTML5 Web 存儲
下一篇：分享8個難忘的HTML5炫酷動畫

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

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

一、百分比布局

二、媒體查詢布局

三、rem 布局

四、vw、vh 響應式布局

五、flex 彈性布局

您的項目需求