1、rem布局 它是一個(gè)長度單位，這個(gè)長度單位是根據(jù)‘根元素’的字體大小的單位確定的根元素字體大小 = 1rem 響應(yīng)式布局 它是在頁面寬度改變時(shí)，整個(gè)頁面或者頁面中的局部隨著頁面的縮放進(jìn)行響應(yīng)并實(shí)時(shí)變化 響應(yīng)式布。

2、核心思想 百分比布局可實(shí)現(xiàn)響應(yīng)式布局，而rem相當(dāng)于百分比布局 實(shí)現(xiàn)手段 動(dòng)態(tài)獲取當(dāng)前視口寬度width，除以一個(gè)固定的數(shù)n，得到rem的值表達(dá)式為rem = width n * windowdevicePixelRatio1 這里考慮設(shè)備。

3、手機(jī)的物理尺寸是375px所以在用css的時(shí)候，設(shè)計(jì)尺寸需要除以2要用rem完成移動(dòng)端的適配，需要固定瀏覽器的顯示寬度不變也就是說，我在設(shè)計(jì)稿上量到寬367px的大小，那么css里可以直接寫width367rem此時(shí)，以375。

4、響應(yīng)式布局 采用自適應(yīng)布局和流式布局的綜合方式，為 不同屏幕分辨率范圍 創(chuàng)建 流式布局 彈性布局 要點(diǎn)在于使用 em和rem單位 來定義元素寬度，與流式布局有極大的相似性，但也有不同之處，主要區(qū)別在于彈性布局的尺。

5、1 這里以上圖為例，因?yàn)槊恳慌_(tái)手機(jī)的屏幕橫向的大小是固定的，如果使用px則可能在小屏幕出現(xiàn)位置不可控，導(dǎo)致內(nèi)容換行錯(cuò)亂等問題故使用remrpx單位布局2 而手機(jī)縱向的高度是無限延伸的，所以上下邊距和邊框等則可以。

6、1less+rem+媒體查詢 2lflexiblejs+rem 響應(yīng)式需要一個(gè)父級(jí)做為布局容器，來配合子級(jí)元素來實(shí)現(xiàn)變化效果原理就是在不同屏幕下，通過媒體查詢來改變這個(gè)布局容器的大小，再改變里面子元素的排列方式和大小，從而實(shí)現(xiàn)不。

7、說了這么多，可能還有很多人，不明白響應(yīng)式布局該怎么去做，以及它的開發(fā)原理是什么原理簡單點(diǎn)說響應(yīng)式布局它是通過CSS中Media Query媒介查詢@media功能，來判斷我們的終端設(shè)備寬度在多少像素內(nèi)，然后就執(zhí)行與之對(duì)應(yīng)的。

8、這種布局中包裹文字的各元素的尺寸采用emrem做單位，而頁面的主要?jiǎng)澐謪^(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位默認(rèn)的文字大小16px就是1em5響應(yīng)式布局 每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變，設(shè)計(jì)方法。

9、第二種 rem響應(yīng)式布局方案等比縮放使用的時(shí)候按照1920的設(shè)計(jì)稿來做100px=1rem，fontsize設(shè)置成100px 750px的設(shè)計(jì)稿 1rem = 100px 設(shè)置屏幕超過2560及以上，就固定1rem = 200px， 寬度小于600及以下，就固定1。

10、響應(yīng)式布局 一使用百分比與rem 寬度% 高度rem 字號(hào)rem 在html中設(shè)置根元素的fontsize大小 這樣頁面中的rem將根據(jù)根元素顯示字號(hào)大小，2rem就是32px 二使用百分比與px 單位設(shè)置px，移動(dòng)端的px自動(dòng)轉(zhuǎn)為rem。

11、優(yōu)點(diǎn)1面對(duì)不同分辨率設(shè)備靈活性強(qiáng) 2能夠快捷解決多設(shè)備顯示適應(yīng)問題 缺點(diǎn)不能完全兼容所有瀏覽器，代碼累贅，加載時(shí)間加長說了這么多，可能還有很多人，不明白響應(yīng)式布局該怎么去做，以及它的開發(fā)原理是什么原理。

12、在pc端，視口寬高就是瀏覽器得寬高rem是一種彈性布局，它強(qiáng)調(diào)等比縮放，100%還原它和響應(yīng)式布局不一樣，響應(yīng)式布局強(qiáng)調(diào)不同屏幕要有不同的顯示，比如媒體查詢。

13、響應(yīng)式的基礎(chǔ)是“相對(duì)”寬度，“相對(duì)”高度，“相對(duì)”大小，是percentage， em， rem 而不是px，pt如果你希望一個(gè)頁面占滿半個(gè)viewport，那么你應(yīng)該用50%的width，bootstrap和所有主流的框架都是以此為基礎(chǔ)的，row是100%。

14、3em和rem單位字體的大小是不固定，都是通過字體大小計(jì)算得到的像素值所以兩者多用于響應(yīng)式布局注意選擇使用什么字體單位主要由你的項(xiàng)目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性。

15、2設(shè)計(jì)方法使用@media媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式在優(yōu)秀的響應(yīng)范圍設(shè)計(jì)下可以給適配范圍內(nèi)的設(shè)備最好的體驗(yàn)，在同一個(gè)設(shè)備下實(shí)際還是固定的布局四響應(yīng)式布局ResponsiveLayout隨著CSS3出現(xiàn)了媒體。