使用实现布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂是如何实现自适应布局，如何根据设计稿来调整的值？rem布局如何用雪碧背景图片？rem一定要加载吗？rem的根 font-size设置为多少合适？看看这篇文章，也许能帮到你。

这些问题整理来自之前发表过的文章，细心的读者也可以自己翻翻之前的内容找到答案，本文统一给个回复，如果对你有用，还请点个赞，谢谢!

rem自适应原理

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章：。

目前有两种，一种是根据来调整html的字号，另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth,maxWidth) {
    var doc = document,win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;
function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (!maxWidth) {
        maxWidth = 540;
    };
    if (width > maxWidth) {
        width = maxWidth;
    }
    //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
    var rem = width * 100 / designWidth;
    //兼容UC开始
    rootStyle="html{font-size:"+rem+'px !important}';
    rootItem = document.getElementById('rootsize') || document.createElement("style");
    if(!document.getElementById('rootsize')){
    document.getElementsByTagName("head")[0].appendChild(rootItem);
    rootItem.id='rootsize';
    }
    if(rootItem.styleSheet){
    rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
    }else{
    try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
    }
    //兼容UC结束
    docEl.style.fontSize = rem + "px";
};
refreshRem();

win.addEventListener("resize",function() {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem,300);
},false);

win.addEventListener("pageshow",function(e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
        clearTimeout(tid);
        tid = setTimeout(refreshRem,300);
    }
},false);

if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
} else {
    doc.addEventListener("DOMContentLoaded",function(e) {
        doc.body.style.fontSize = "16px";
    },false);
}
})(640,640);

你可以把上面的内嵌到html的head中，换算比例是1rem=100px，为了计算方便，你可以在我的一个项目下载完整的结构和一个压缩的js。

上面代码中的关键代码是：

var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";

• 第一行代码，获取移动设备的宽度，第二行，rem的值等于(设备的宽度)x100/(设计稿宽度)，第三行，设置html的字号为第二行的值。
• 有些人可能会注意到第二行代码跟淘宝的那个有所区别，区别就在于rem的换算比例，这里你可以任意改动为实际中的情况，比如有人喜欢用20px，那你可以将上面的100改为20，换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章：。
• 还有的人要用回淘宝的那个，那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了，假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章：。

html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {

html {

font-size:94%!important

}

}
@media only screen and (min-width: 561px) {

html {

font-size:109%!important

}

}
@media only screen and (min-width: 641px) {

html {

font-size:125%!important

}
body {

max-width: 640px

}

}

1. 第一种将背景图片切成一个，然后换算成base64.的方式，或者使用sass的方式转换，不过有弊端就是样式文件会增大，看个人衡量。
2. 第二种则是通过背景图片的百分比精准定位，详情见这篇文章：。
3. 或者对于精准度不太高，其实使用rem定位也可以，就是要把相邻图片隔开些。

原文链接： 版权所有，转载时请注明出处，违者必究。注明出处格式：前端开发博客 ()