rem作用於非根元素時，相對於根元素字型大小；rem作用於根元素字型大小時，相對於其出初始字型大小——mdn
em作為font-size的單位時，其代表父元素的字型大小，em作為其他屬性單位時，代表自身字型大小——mdn
從作用上可以看出,rem可以用來解決等比例縮放問題，也就是響應式問題。而em用來解決，當設定了等比縮放，字型不能很好展示，可以用em來解決字型問題。
實現方法：
假設ui圖是750px，在chrome除錯的時候，是除錯375px；
1.html設定基準
2.html 設定media query
3.實際實現的時候，比如量的尺寸是100px，寫成rem 就是 1rem; 20px 即.2rem； 這裡html:50px是為了好算。
4.字型相容性問題：
可以針對375px 螢幕設定body 字型。然後如果為了微調，可以利用media query 來針對不同螢幕微調。
第一種實現的原理是：假設我們的ui圖是只針對375這一種螢幕設計的。那麼我們只要實現了375的螢幕效果。其他螢幕的，相應的用media query來微調即可。實時上這種已經基本達到需求，只要media 區間設定得小一點即可。
實現方法：
css部分：
html
body
/* js被禁止的回退方案 */
@media screen and (min-width: 320px)
body
}@media screen and (min-width: 481px) and (max-width:640px)
body
}@media screen and (min-width: 641px)
body }
noscript
/* js被禁止的回退方案 */
.p1, .p2
.p1
.s1
.p2
.s2
var documentelement = document.documentelement;
function callback()
document.addeventlistener('domcontentloaded', callback);
window.addeventlistener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
寬度為螢幕寬度的50%，字型大小1.2em
字型大小1.2.em
寬度為螢幕寬度的40%，字型大小預設
字型大小1.2em
$ue-width: 750; /* ue圖的寬度 */
@function px2rem($px) rem;
}p
1.viewport
加了這句才能真正實現設計圖在移動端的正常顯示，否則會等比例縮小。
2.rem
rem實現等比例縮放的例子就是上面的例子。
3.media query
這個是解決響應式的最靈活的方法，相當於給你乙個根據螢幕單獨配置的權利。
4.其他細節
比如根據不同情況隱藏或者顯示不同內容---》display:none;
比如換行摺疊
比如超出使用省略號等等。
rem布局解析
移動端的螢幕大小各異,尤其是安卓機,千奇百怪,各種尺寸的機型都有,而且有1倍屏,2倍屏，3倍屏之分，作為精益求精的前端，我們希望找到一種完美適配各種機型的方案。rem是現在主流的移動端自適應布局方案，本文主要介紹了rem布局的原理和通用方案 首先說一下，我們想要達到的自適應效果是什麼。很簡單 元素 ...
rem布局原理
昨天去面試，面試官竟然說他們用 查詢針對不同的螢幕寬度做了9個不同的rem布局，呵呵.eg html div上面例子中div寬度為320，因為他是16乘以根元素的font size的值。每次裝置螢幕寬度變化時，讓根元素的font size變化 320屏寬時，font size 20px,16rem能...
關於rem布局的解析
html media only screen and min width 401px media only screen and min width 428px media only screen and min width 481px media only screen and min width...