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)式布局扎狱〔嗟剑可以有以下選擇方案：

利用上面的方法自己來實(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)成型的方案