響應式佈局：只需要開發一套代碼，只需要一套代碼使頁面適應不同的屏幕。

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

響應式佈局的 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老師的博客-艾編程

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

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

一、百分比佈局

二、媒體查詢佈局

三、rem 佈局

四、vw、vh 響應式佈局

前端加薪必備：掌握這10個利於SEO優化的HTML標籤吧

Git從入門到實踐，掌握現代軟件開發必備工具！

記住這12個要點，你也能打造出讓HR和技術主管前一亮的前端簡歷

從零入門Vue.js！六步學習路線和知識體系盤點詳解！

CSS 中的 BFC 是什麼，有什麼作用？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結