盤點(diǎn)：響應(yīng)式布局的5種實(shí)現(xiàn)方式

應(yīng)式布局：只需要開發(fā)一套代碼，只需要一套代碼使頁面適應(yīng)不同的屏幕。

響應(yīng)式設(shè)計(jì)通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容；

響應(yīng)式布局的 5 種實(shí)現(xiàn)方案

百分比布局
媒體查詢布局
rem 響應(yīng)式布局
vw 響應(yīng)式布局
flex 彈性布局

一、百分比布局

比如，當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí)，通過百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實(shí)現(xiàn)響應(yīng)式的效果。

height、width 屬性的百分比依托于父標(biāo)簽的寬高。但是 padding、border、margin 等屬性的情況又不一樣
1、子元素的 top 和 bottom 如果設(shè)置百分比，則相對于直接非 static 定位（默認(rèn)定位）的父元素的高度，同樣，子元素的 left 和 right 如果設(shè)置百分比，則相對于直接非 static 定位（默認(rèn)定位的）父元素的寬度。
2、子元素的 padding 和 margin 如果設(shè)置百分比，不論是垂直方向或者是水平方向都相對于直接父親元素的 width，而與父元素的 height 無關(guān)。
border-radius 為百分比，則是相對于自身的寬度

缺點(diǎn)：

計(jì)算困難，如果我們要定義一個(gè)元素的寬度和高度，按照設(shè)計(jì)稿，必須換算成百分比單位。

二、媒體查詢布局

通過@media 媒體查詢，可以通過給不同屏幕的大小編寫不同的樣式來實(shí)現(xiàn)響應(yīng)式的布局。

響應(yīng)式缺點(diǎn)：如果瀏覽器大小改變時(shí)，需要改變的樣式太多，那么多套樣式代碼會很繁瑣。

<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、在實(shí)際開發(fā)中，常用的響應(yīng)斷點(diǎn)閾值設(shè)定

（括號后面是樣式的縮寫）

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

2、在實(shí)際開發(fā)中，常用的兩種適配方案

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、在實(shí)際開發(fā)時(shí)，@media 會結(jié)合刪格系統(tǒng)一起來使用，實(shí)現(xiàn)真正意義上的響應(yīng)式開發(fā)。

柵格布局+斷點(diǎn)設(shè)定實(shí)現(xiàn)響應(yīng)式

@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;
}
……

因代碼過長，完整代碼與文件可進(jìn)入粉絲群獲取！

三、rem 布局

1、rem 如何適配

rem 是相對于 html 根元素的字體大小的單位。
我們通過修改 html 中 font-size 的字體大小來控制 rem 的大小。

比如：

html {
 font-size: 10px;
}
.box {
 width: 10rem;
 height: 20rem;
}

當(dāng) html 中 font-size: 10px; 時(shí)，此時(shí) 1rem = 10px，所以 box 盒子的寬高分別為：100px 和 200px;
當(dāng)我們把 html 中 font-size: 20px; 時(shí)，此時(shí) 1rem = 20px,此時(shí) box 盒子的寬高就為 200px 和 400px;

2、實(shí)際開發(fā)中如何適配，如何將設(shè)計(jì)稿對應(yīng)的 px 單位轉(zhuǎn)換為 rem 單位

在實(shí)際的開發(fā)中，我們通常會以 750px 的移動端設(shè)計(jì)稿來開發(fā)。
我們在代碼寫完后，統(tǒng)一會把所有 px 單位全部轉(zhuǎn)成 rem 來實(shí)現(xiàn)。

在 px 單位下，一個(gè)盒子的樣式如下：

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

如果我們把總寬 750px 分成 10rem，些時(shí) 1rem = 75px; ，轉(zhuǎn)成對應(yīng)的 rem 單位，就是用對應(yīng)的 px/75px，得到如下結(jié)果。

.box {
 width: 9.3333rem;
 height: 6.6667rem;
 font-size: 0.2667rem;
 padding: 0.1333rem;
 background-color: red;
}

以上單位的轉(zhuǎn)換，我們可以利用 vscode 的插件 px to rem 來自動實(shí)現(xiàn)。
把所有代碼全部寫完，然后一次性用 px to rem 插件轉(zhuǎn)換成 rem 單位

3、接下來如何適配不同的瀏覽器，實(shí)現(xiàn)等比例的縮放呢？

比如現(xiàn)在有 5 個(gè)同尺寸的屏幕（750 640 480 375 320），所有屏幕整體寬分成 10rem
那我們就需要分別得到這幾種不同屏幕下對應(yīng)的 html 根元素的 font-size 大小了。

屏幕尺寸	html 中 font-size 大小（1rem 大小）
750px	75px
640px	64px
480px	48px
375px	37.5px
320px	32px

我們可以通過 js 來動態(tài)修改不同屏幕尺寸下的 font-size 大小就可以實(shí)現(xiàn)等比例放大和縮小了
js 動態(tài)修改 html 根元素的 font-size 的大小，能適配不同尺寸的屏幕，不再局限于這 5 種
<script>
initPage();
function initPage() {
var clientWidth =
document.documentElement.clientWidth || document.body / clientWidth; //獲取屏幕可視區(qū)寬
var html = document.getElementsByTagName("html")[0]; //獲取html根元素
html.style.fontSize = clientWidth / 10 + "px"; //動態(tài)設(shè)置font-size大小
}
window.onresize = initPage;
</script>

注：

我們可以用 flexible.js 插件來幫我們實(shí)現(xiàn)

flexible 原理就是根據(jù)不同的屏幕寬度動態(tài)的設(shè)置網(wǎng)頁中 html 根節(jié)點(diǎn)的 font-size
然后咱們將所有的 px 用 rem 來代替，這樣就實(shí)現(xiàn)了不同大小的屏幕都適應(yīng)相同的樣式了。

四、vw、vh 響應(yīng)式布局

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

100vw = 視圖窗寬度，100vh = 100 視圖窗高度
如果移動端有 5 個(gè)不同的視口寬尺寸 750 ，640，480，375，320，則在不同尺寸下，對應(yīng)的 1vw 的 px 值如下表
移動端尺寸1vw750px7.5px640px6.4px480px4.8px375px3.75px320px320px

我們在實(shí)際開發(fā)時(shí)，只需要按其中的某一個(gè)尺寸來的 px 單位的設(shè)計(jì)稿來開發(fā)就好（一般是以 750px 的大小為主）
代碼全部開發(fā)好后，我們再利用 vscode 的插件 px to vw 來實(shí)現(xiàn)單位的自動轉(zhuǎn)換。

案例：寬為 750px 設(shè)計(jì)稿下的某個(gè)元素樣式如下

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

轉(zhuǎn)換為 vw 后的代碼如下：

<style>
 body {
   margin: 0;
}
 .box {
   width: 100vw;
   height: 40vw;
   background-color: red;
}
</style>
<body>
 <div class="box"></div>
</body>

在寬為 750px 的設(shè)計(jì)稿下，把 px 轉(zhuǎn)換為 vw，是用 px/7.5 得到對應(yīng)的 vw 單位值
轉(zhuǎn)換好后，vw 是自動應(yīng)視口寬的，所以就達(dá)到了響應(yīng)式開發(fā)的效果。

五、flex 彈性布局

彈性布局是一種十分方便的，只需要依賴于 CSS 樣式的實(shí)現(xiàn)響應(yīng)式布局的方式，也是最多用到的一種實(shí)現(xiàn)響應(yīng)式的方法。

彈性布局在父、子元素上都有相對應(yīng)的屬性來規(guī)范子元素在父元素中的 “ 彈力 ”。

在父元素上，我們經(jīng)常會用到的有關(guān)彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，這幾個(gè)屬性分別從主軸的方向、是否換行、項(xiàng)目在主軸上的對齊方式、項(xiàng)目在交叉軸上的對齊方式、項(xiàng)目在多根軸線上的對齊方式來規(guī)范了項(xiàng)目在父元素中的彈性。
在子元素上，我們經(jīng)常會用到的有關(guān)彈性布局的屬性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，這幾個(gè)屬性分別從項(xiàng)目的排序、項(xiàng)目放大比例、項(xiàng)目縮小比例、項(xiàng)目占據(jù)主軸空間、單個(gè)項(xiàng)目在交叉軸上的對齊方式來規(guī)范了項(xiàng)目自身的彈性。

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

30 天挑戰(zhàn)學(xué)習(xí)計(jì)劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程

　node節(jié)點(diǎn)

動距離

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> 元素。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn)：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

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

窗口尺寸、工作區(qū)尺寸

可視區(qū)尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫法：

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

可視區(qū)尺寸高度

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已經(jīng)支持documentElement對象的各種屬性, 而

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

編寫自定義函數(shù)：

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

// 獲取瀏覽器窗口的可視區(qū)域的高度
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個(gè)難忘的HTML5炫酷動畫

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

盤點(diǎn)：響應(yīng)式布局的5種實(shí)現(xiàn)方式

響應(yīng)式布局的 5 種實(shí)現(xiàn)方案

一、百分比布局

二、媒體查詢布局

三、rem 布局

四、vw、vh 響應(yīng)式布局

五、flex 彈性布局

您的項(xiàng)目需求