rem自適應布局

使用rem實現自適應布局，應該算是當前移動前端的一大趨勢，有些人對此還有點迷惑，搞不懂rem是如何實現自適應布局，如何根據設計稿來調整rem的值？rem布局如何用雪碧背景？rem一定要載入js嗎？rem的根html font-size設定為多少合適？看看這篇文章，也許能幫到你。

目前有兩種，一種是根據js來調整html的字型大小，另一種則是通過**查詢來調整字型大小。

使用js

;(function(designwidth, maxwidth) ;

if (width > maxwidth) 
//與**做法不同，直接採用簡單的rem換算方法1rem=100px
var rem = width * 100 / designwidth;
//相容uc開始
rootstyle="html';
rootitem = document.getelementbyid('rootsize') || document.createelement("style");
if(!document.getelementbyid('rootsize'))
if(rootitem.stylesheet)elsecatch(f)
} //相容uc結束
docel.style.fontsize = rem + "px";
}; refreshrem();
win.addeventlistener("resize", function() , false);
win.addeventlistener("pageshow", function(e) 
}, false);
if (doc.readystate === "complete") else , false);
}})(640, 640);

上面**中的關鍵**是：

var width = docel.getboundingclientrect().width;

var rem = width * 100 / designwidth;
docel.style.fontsize = rem + "px";

說到底，上面的js**不就是根據不同的裝置調整對應的html字型大小嘛，那麼我們根據實際的裝置，來加上相應的字型大小不就行了嗎？

我們知道html的預設字型大小是16px，則對應的裝置下可以通過設定對應的font-size使其有一致的縮放比例。

html 

@media only screen and (min-width: 481px) 
}@media only screen and (min-width: 561px) 
}@media only screen and (min-width: 641px) 
body 
}

國內的很多人都提倡使用字型圖示或者用svg的方式來實現，但這些在小專案中明顯是有點不實際。我通常使用下面兩種方式。

第一種將背景切成乙個，然後換算成base64.的方式，或者使用sass的方式轉換，不過有弊端就是樣式檔案會增大，看個人衡量。

第二種則是通過背景的百分比精準定位，詳情見這篇文章：css3背景百分比及應用。

或者對於精準度不太高，其實使用rem定位也可以，就是要把相鄰隔開些。

Rem 自適應布局

1.先引入一下js,到頭部的script標籤的最前面。2.根據設計稿大小，調整裡面的最後兩個引數值。3.使用1 rem 100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px 300px,換算成 rem則為1 rem 3rem。上面的 如果在 uc瀏覽器下橫屏與豎屏轉換，發現 並沒有 自適應...

自適應rem布局

自適應處理 假設 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,fals...

自適應布局rem

百分比布局只能實現寬度自適應 高度無法自適應 高度也自適應 使用乙個新的單位rem rem root element 根元素 參照根元素的字型大小，是相對單位 預設html元素文字大小是16px 所以 1rem 16px 10rem 160px 原理 示例 window.onresize setht...