昨天文章中，有粉丝评论说现在移动设施那么多，使用rem的方式会比我的自适应的方式更好。于是我就查询资料，对着两方面进行了比照和验证。

先来说一下rem的适应方式的基本原理：简单来说，rem就是用根元素的字体大小作为单位来进行布局的方式。这样相当于有了一个全局的参考系，不用单独针对某一部分去进行特别解决，根据调整字体的大小达到自适应的目的。展现效果就是等比缩放。像素计算公式

1rem = 1px * html.fontsize（仅为逻辑公式，看懂就好）

具体参考如下：

通过css来实现适应变化

 
 
 
 
 
 
 
 
CSS实例：DIV宽度会随浏览器宽度变化，改变浏览器宽度
 
 
 

通过js来实现，提供一个具体方法逻辑，实验的过程大家自行完成

function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
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);
}
};

个人观点：

rem的兴起主要是因为移动互联网的兴起，移动设施因为分辨率不会产生变化，是rem发挥功能最佳场所。《淘宝产品十年事》这本书里，作者把产品分为大致三种类型：平台型、垂直型、网站型，这点我非常的认同。

这三类产品中，网站型产品和垂直型产品是客户体验统一性很高的，可以通过有效地方式取得数据，分析客户行为，选择合适的方法。rem的布局方式更适应此类开发。

平台型产品目前主要还是pc端使用居多，客户调研困难，业务复杂，产品负责人较多，开辟过程中产品需求变化较多，使用前台必备：自适应所有分辨率的神技中样式分类的方式在界面上的改动更灵活。