https://juejin.im/post/5caaa230e51d452b672f9703

響應(yīng)式布局指的是同一頁面在不同屏幕尺寸下有不同的布局。傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機(jī)端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就夠，缺點(diǎn)就是CSS比較重。下面是博客網(wǎng)站對(duì)不同設(shè)備適配后的結(jié)果，分別是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell臺(tái)式寬屏(1440 X 900)。

響應(yīng)式設(shè)計(jì)與自適應(yīng)設(shè)計(jì)的區(qū)別：響應(yīng)式開發(fā)一套界面，通過檢測(cè)視口分辨率，針對(duì)不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容；自適應(yīng)需要開發(fā)多套界面，通過檢測(cè)視口分辨率，來判斷當(dāng)前訪問的設(shè)備是pc端、平板、手機(jī)，從而請(qǐng)求服務(wù)層，返回不同的頁面。

1. 媒體查詢

CSS3媒體查詢可以讓我們針對(duì)不同的媒體類型定義不同的樣式，當(dāng)重置瀏覽器窗口大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。

如何選擇屏幕大小分割點(diǎn)

如何確定媒體查詢的分割點(diǎn)也是一個(gè)開發(fā)中會(huì)遇到的問題，

選擇600px,900px,1200px,1800px作為分割點(diǎn)、480px,800px,1400px,1400px

上面的分割方案不一定滿足項(xiàng)目中的實(shí)際需求，我們可以先用跨度大的分割點(diǎn)進(jìn)行分割，如果出現(xiàn)不適配的情況可以再根據(jù)實(shí)際情況增加新的分割點(diǎn)。

移動(dòng)優(yōu)先 OR? PC優(yōu)先

不管是移動(dòng)優(yōu)先還是PC優(yōu)先，都是依據(jù)當(dāng)隨著屏幕寬度增大或減小的時(shí)候，后面的樣式會(huì)覆蓋前面的樣式。因此，移動(dòng)端優(yōu)先首先使用的是min-width，PC端優(yōu)先使用的max-width。

2.百分比布局

通過百分比單位，可以使得瀏覽器中組件的寬和高隨著瀏覽器的高度的變化而變化，從而實(shí)現(xiàn)響應(yīng)式的效果。Bootstrap里面的柵格系統(tǒng)就是利用百分比來定義元素的寬高，CSS3支持最大最小高，可以將百分比和max(min)一起結(jié)合使用來定義元素在不同設(shè)備下的寬高。

子元素的height或width中使用百分比，是相對(duì)于子元素的直接父元素，width相對(duì)于父元素的width，height相對(duì)于父元素的height；子元素的top和bottom如果設(shè)置百分比，則相對(duì)于直接非static定位(默認(rèn)定位)的父元素的高度，同樣子元素的left和right如果設(shè)置百分比，則相對(duì)于直接非static定位(默認(rèn)定位的)父元素的寬度；子元素的padding如果設(shè)置百分比，不論是垂直方向或者是水平方向，都相對(duì)于直接父親元素的width，而與父元素的height無關(guān)。跟padding一樣，margin也是如此，子元素的margin如果設(shè)置成百分比，不論是垂直方向還是水平方向，都相對(duì)于直接父元素的width；border-radius不一樣，如果設(shè)置border-radius為百分比，則是相對(duì)于自身的寬度，除了border-radius外，還有比如translate、background-size等都是相對(duì)于自身的；

從上述對(duì)于百分比單位的介紹我們很容易看出如果全部使用百分比單位來實(shí)現(xiàn)響應(yīng)式的布局，有明顯的以下兩個(gè)缺點(diǎn)：

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

各個(gè)屬性中如果使用百分比，相對(duì)父元素的屬性并不是唯一的。比如width和height相對(duì)于父元素的width和height，而margin、padding不管垂直還是水平方向都相對(duì)比父元素的寬度、border-radius則是相對(duì)于元素自身等等，造成我們使用百分比單位容易使布局問題變得復(fù)雜。

3.rem布局

REM是CSS3新增的單位，并且移動(dòng)端的支持度很高，Android2.x+,ios5+都支持。rem單位都是相對(duì)于根元素html的font-size來決定大小的,根元素的font-size相當(dāng)于提供了一個(gè)基準(zhǔn)，當(dāng)頁面的size發(fā)生變化時(shí)，只需要改變font-size的值，那么以rem為固定單位的元素的大小也會(huì)發(fā)生響應(yīng)的變化。 因此，如果通過rem來實(shí)現(xiàn)響應(yīng)式的布局，只需要根據(jù)視圖容器的大小，動(dòng)態(tài)的改變font-size即可（而em是相對(duì)于父元素的）。

rem響應(yīng)式的布局思想：

一般不要給元素設(shè)置具體的寬度，但是對(duì)于一些小圖標(biāo)可以設(shè)定具體寬度值

高度值可以設(shè)置固定值，設(shè)計(jì)稿有多大，我們就嚴(yán)格有多大

所有設(shè)置的固定值都用rem做單位（首先在HTML總設(shè)置一個(gè)基準(zhǔn)值：px和rem的對(duì)應(yīng)比例，然后在效果圖上獲取px值，布局的時(shí)候轉(zhuǎn)化為rem值)

js獲取真實(shí)屏幕的寬度，讓其除以設(shè)計(jì)稿的寬度，算出比例，把之前的基準(zhǔn)值按照比例進(jìn)行重新的設(shè)定，這樣項(xiàng)目就可以在移動(dòng)端自適應(yīng)了

rem布局的缺點(diǎn)：

在響應(yīng)式布局中，必須通過js來動(dòng)態(tài)控制根元素font-size的大小，也就是說css樣式和js代碼有一定的耦合性，且必須將改變font-size的代碼放在css樣式之前

/*上述代碼中將視圖容器分為10份，font-size用十分之一的寬度來表示，最后在header標(biāo)簽中執(zhí)行這段代碼，就可以動(dòng)態(tài)定義font-size的大小，從而1rem在不同的視覺容器中表示不同的大小，用rem固定單位可以實(shí)現(xiàn)不同容器內(nèi)布局的自適應(yīng)。*/

REM布局也是目前多屏幕適配的最佳方式。默認(rèn)情況下我們html標(biāo)簽的font-size為16px,我們利用媒體查詢，設(shè)置在不同設(shè)備下的字體大小。

4.視口單位

css3中引入了一個(gè)新的單位vw/vh，與視圖窗口有關(guān)，vw表示相對(duì)于視圖窗口的寬度，vh表示相對(duì)于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個(gè)相關(guān)的單位。各個(gè)單位具體的含義如下：

vw? 相對(duì)于視窗的寬度，1vw 等于視口寬度的1%，即視窗寬度是100vw

vh? ?相對(duì)于視窗的高度，1vh 等于視口高度的1%，即視窗高度是100vh

vmin? ?vw和vh中的較小值

vmax? ?vw和vh中的較大值

用視口單位度量，視口寬度為100vw，高度為100vh（左側(cè)為豎屏情況，右側(cè)為橫屏情況）。例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實(shí)際渲染結(jié)果可能是7px）。

使用視口單位來實(shí)現(xiàn)響應(yīng)式有兩種做法：

1.僅使用vw作為CSS單位

2.搭配vw和rem

5.圖片響應(yīng)式

這里的圖片響應(yīng)式包括兩個(gè)方面，一個(gè)就是大小自適應(yīng)，這樣能夠保證圖片在不同的屏幕分辨率下出現(xiàn)壓縮、拉伸的情況；一個(gè)就是根據(jù)不同的屏幕分辨率和設(shè)備像素比來盡可能選擇高分辨率的圖片，也就是當(dāng)在小屏幕上不需要高清圖或大圖，這樣我們用小圖代替，就可以減少網(wǎng)絡(luò)帶寬了。

1.使用max-width（圖片自適應(yīng)）:

圖片自適應(yīng)意思就是圖片能隨著容器的大小進(jìn)行縮放

2.使用srcset? ? <img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

3.使用background-image

4.使用picture標(biāo)簽

總結(jié)：

響應(yīng)式布局的實(shí)現(xiàn)可以通過媒體查詢+px,媒體查詢+百分比，媒體查詢+rem+js,vm/vh,vm/vh +rem這幾種方式來實(shí)現(xiàn)。但每一種方式都是有缺點(diǎn)的，媒體查詢需要選取主流設(shè)備寬度尺寸作為斷點(diǎn)針對(duì)性寫額外的樣式進(jìn)行適配，但這樣做會(huì)比較麻煩，只能在選取的幾個(gè)主流設(shè)備尺寸下呈現(xiàn)完美適配，另外用戶體驗(yàn)也不友好，布局在響應(yīng)斷點(diǎn)范圍內(nèi)的分辨率下維持不變，而在響應(yīng)斷點(diǎn)切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機(jī)般“咔咔咔”地一下又一下。通過百分比來適配首先是計(jì)算麻煩，第二各個(gè)屬性中如果使用百分比，其相對(duì)的元素的屬性并不是唯一的，這樣就造成我們使用百分比單位容易使布局問題變得復(fù)雜。通過采用rem單位的動(dòng)態(tài)計(jì)算的彈性布局，則是需要在頭部內(nèi)嵌一段腳本來進(jìn)行監(jiān)聽分辨率的變化來動(dòng)態(tài)改變根元素字體大小，使得CSS與JS 耦合了在一起。通過利用純css視口單位實(shí)現(xiàn)適配的頁面，是既能解決響應(yīng)式斷層問題，又能解決腳本依賴的問題的，但是兼容性還沒有完全能結(jié)構(gòu)接受。

響應(yīng)式布局的成型方案

現(xiàn)在的css，UI框架等都已經(jīng)考慮到了適配不同屏幕分辨率的問題，實(shí)際項(xiàng)目中我們可以直接使用這些新特性和框架來實(shí)現(xiàn)響應(yīng)式布局?？梢杂幸韵逻x擇方案：

利用上面的方法自己來實(shí)現(xiàn)，比如CSS3 Media Query,rem，vw等

Flex彈性布局，兼容性較差

Grid網(wǎng)格布局，兼容性較差

Columns柵格系統(tǒng)，往往需要依賴某個(gè)UI庫，如Bootstrap

響應(yīng)式布局的要點(diǎn)

在實(shí)際項(xiàng)目中，我們可能需要綜合上面的方案，比如用rem來做字體的適配，用srcset來做圖片的響應(yīng)式，寬度可以用rem，flex，柵格系統(tǒng)等來實(shí)現(xiàn)響應(yīng)式，然后可能還需要利用媒體查詢來作為響應(yīng)式布局的基礎(chǔ)，因此綜合上面的實(shí)現(xiàn)方案，項(xiàng)目中實(shí)現(xiàn)響應(yīng)式布局需要注意下面幾點(diǎn)：

設(shè)置viewport

媒體查詢

字體的適配（字體單位）

百分比布局

圖片的適配（圖片的響應(yīng)式）

結(jié)合flex，grid，BFC，柵格系統(tǒng)等已經(jīng)成型的方案