1焰檩、首先rem是根據(jù)祖元素font-size大小倍數(shù)的單位焚虱，一般設置html元素的font-size大小链嘀；
2萌狂、rem自適應原理就是根據(jù)監(jiān)聽屏幕寬度，對應改變祖元素font-size的大小怀泊，從而改變頁面上使用rem單位元素的大小而做到的茫藏；
html{font-size:20px} //祖元素
div{width:2rem} //此時`div`寬度為40px;
進入正題
一般UI設計師給出的UI圖為px單位（或其他絕對單位），UI圖是根據(jù)一定屏幕尺寸做出來的; 也就是說霹琼，UI圖上一個200px的div是在1920屏幕上顯示的尺寸务傲；如果在1440的筆記本上則div應該自適應的縮小枣申；這也是我們要做的事售葡；
監(jiān)聽屏幕寬度一是通過css媒體查詢，二是注冊onresize方法糯而；
css版本 PC端
@media screen and (width: 1920px) {
html { font-size: 100px;min-width: 100%;}
}
@media screen and (min-width: 1024px) {
html {font-size: 53.33333333px !important; }
}
@media screen and (min-width: 1366px) {
html {font-size: 71.14583333px !important;}
}
@media screen and (min-width: 1280px) {
html { font-size: 66.66666667px !important;}
}
@media screen and (min-width: 1440px) {
html { font-size: 75px !important;}
}
@media screen and (min-width: 1600px) {
html { font-size: 83.33333333px !important}
}
@media screen and (min-width: 1920px) {
html {font-size: 100px !important;}
}
less版本pc端
編譯過后與css版本一樣,但更靈活天通，自動計算，適用手機與PC;
html{
@firstViewportWidth: 1920px; //默認UI設計尺寸
@defaultFontSize: 100px; //默認初始fontsize大小
@media screen and (width: @firstViewportWidth){ //綁定到沒聽查詢
font-size: @defaultFontSize;
min-width: 100%;
};
//根據(jù)傳入的屏幕尺寸@viewportWidth計算出與初始@firstViewportWidth的比
例熄驼，然后將默認的fontsize> @defaultFontSize對應的放大縮小
.media(@viewportWidth,@firstViewportWidth:1920px){
@media screen and (min-width: @viewportWidth) {
font-size: @defaultFontSize / (@firstViewportWidth /
@viewportWidth)!important;
}
};
.media(1024px); //所要設配的屏幕尺寸
.media(1366px);
.media(1280px);
.media(1440px);
.media(1600px);
.media(1920px);
}
@media screen and (max-width: 1440px) {
html {
font-size: 75px !important;
}
}
手機端把傳入的設配尺寸改了就行像寒；
需要注意的坑
1烘豹、由于谷歌瀏覽器支持的最小font-size大小為12px;所以編譯過后的最小font-size大小不應該小于12px；（手機端需注意）诺祸；
2携悯、PC端初始大小不宜過小，手機端不宜太大筷笨，不能為了好計算都設為100px憔鬼；
最后附上rem轉px工具 (http://520ued.com/tools/rem?utm_source=caibaojian.com)
over
