響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局
響應式設計與自適應設計的區別：
響應式開發一套介面，通過檢測視口解析度，針對不同客戶端在客戶端做**處理，來展現不同的布局和內容
自適應需要開發多套介面，通過檢測視口解析度，來判斷當前訪問的裝置是pc端、平板、手機，從而請求服務層，返回不同的頁面
方案：1.**查詢：
css3**查詢可以讓我們針對不同的**型別定義不同的樣式，當重置瀏覽器視窗大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
@media screen and (min-width: 414px)/@media screen and (max-width: 414px)
2.百分比布局
通過百分比單位，可以使得瀏覽器中元件的寬和高隨著瀏覽器的高度的變化而變化，從而實現響應式的效果。
bootstrap裡面的柵格系統就是利用百分比來定義元素的寬高，css3支援最大最小高，可以將百分比和max(min)一起結合使用來定義元素在不同裝置下的寬高。
必須要弄清楚css中子元素的百分比到底是相對誰的百分比:
1. 子元素的height或width中使用百分比，是相對於子元素的直接父元素，width相對于父元素的width，height相對于父元素的height
2. 子元素的top和bottom如果設定百分比，則相對於直接非static定位(預設定位)的父元素的高度，同樣子元素的left和right如果設定百分比，則相對於直接非static定位(預設定位的)父元素的寬度
3. 子元素的padding如果設定百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關
4. 跟padding一樣，margin也是如此，子元素的margin如果設定成百分比，不論是垂直方向還是水平方向，都相對於直接父元素的width
5. border-radius不一樣，如果設定border-radius為百分比，則是相對於自身的寬度，除了border-radius外，還有比如translate、background-size等都是相對於自身的
3.rem布局
rem是css3新增的單位，並且移動端的支援度很高，android2.x+,ios5+都支援。rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size相當於提供了乙個基準，當頁面的size發生變化時，只需要改變font-size的值，那麼以rem為固定單位的元素的大小也會發生響應的變化。 因此，如果通過rem來實現響應式的布局，只需要根據檢視容器的大小，動態的改變font-size即可。
缺點：在響應式布局中，必須通過js來動態控制根元素font-size的大小，也就是說css樣式和js**有一定的耦合性，且必須將改變font-size的**放在css樣式之前
視口單位:
單位 含義
vw 相對於視窗的寬度，1vw 等於視口寬度的1%，即視窗寬度是100vw
vh 相對於視窗的高度，1vh 等於視口高度的1%，即視窗高度是100vh
vmin vw和vh中的較小值
vmax vw和vh中的較大值
響應式布局的要點:
在實際專案中，我們可能需要綜合上面的方案，比如用rem來做字型的適配，用srcset來做的響應式，寬度可以用rem，flex，柵格系統等來實現響應式，然後可能還需要利用**查詢來作為響應式布局的基礎，因此綜合上面的實現方案，專案中實現響應式布局需要注意下面幾點：
設定viewport(viewport 是使用者網頁的可視區域)—>**查詢—>字型的適配（字型單位）—>百分比布局—>的適配（的響應式）—>結合flex，grid，bfc，柵格系統等已經成型的方案
"viewport" content=
"width=device-width, initial-scale=1.0"
>
width：控制 viewport 的大小，可以指定的乙個值，如 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100
% 時的 css 的畫素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放。
WEB前端 響應式實現原理
bootstrap柵格化想必大家都用過。那麼它的原理如何？通過 查詢和定義好類。以便直接使用 1 先定義好css類。define the width col xs 1 col xs 2 col xs 3 col xs 4 col xs 5 col xs 6 col xs 7 col xs 8 col...
前端響應式 柵格基礎原理及實現
float 百分比寬度 margin 查詢media float設定為right lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle rel stylesheet...
前端響應式布局
這段時間一直在學習前端的東西記錄一下自己所欠缺的東西！響應式布局 由於以前基本上沒有接觸前端的東西，熟悉又陌生，熟悉是因為經常聽見同事在說，陌生是因為自己沒有實踐過 查詢 查詢 剛開始我看名字以為是查詢之類的 說明 通過不同的 型別和條件定義樣式表規則。ok 我已經了基本上了解響應式布局是幹嘛的了 ...