本来想写一篇，webapp使用Rem的问题，查了一下相关rem的介绍之后，发现很多平台已经解释的很清楚了，图文并茂，于是我便想将其解释资源整理一些，方便以后自己查阅。
腾讯ISUX：web app变革之rem(解释的最精辟了)
大漠博客：CSS3的REM设置字体大小
小黑成长录：关于webapp中的文字单位的一些捣腾
前端观察站：px em rem在WEB前端开发中的区别
这里面需要注意的一点就是，ren是根据根元素的字体大小来确定的：
我们可能经常设置html{font-size:20px}或者font-size：16px，这些其实都没有错，但是可能我们有更好的设置方法：
html{font-size:62.5%;} /* font-size 62.5% = 10px =1rem */
body{font-size:%;} /* font-size 100% = 10px = 1rem */
.rem-{font-size:.2rem;}
.rem-{font-size:.4rem;}
.rem-{font-size:.6rem;}
通过设置html的font-size：62.5%，我们就可以很方便的计算出px所对应的rem值，简单粗暴。
常用的调节rem的视口尺寸：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: .75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
最后分享一段淘宝手机屏幕尺寸判断改变字体大小的js(淘宝首页好像现在没有用rem了还是采用定宽px):
!function(x) {
//x 为window
function w() {
//document.documentElement.getBoundingClientRect().width;
var a = r.getBoundingClientRect().width;
//先计算 a / v>540然后 && (a =540*v)
a / v > && (a = * v), x.rem = a / , r.style.fontSize = x.rem + "px"
}
//s = window.document ,r = document.documentElement,q = document.querySelector('meta[name = "viewport"]'),p = document.querySelector("meta[name = 'flexible']")
var v, u, t, s = x.document, r = s.documentElement, q = s.querySelector('meta[name="viewport"]'), p = s.querySelector('meta[name="flexible"]');
if (q) {
console.warn("将根据已有的meta标签来设置缩放比例");
var o = q.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
o && (u = parseFloat(o[]), v = parseInt( / u))
} else {
if (p) {
var o = p.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
//v是meta[name = "viewport"] dpi值大小
o && (v = parseFloat(o[]), u = parseFloat(( / v).toFixed()))
}
}
if (!v && !u) {
var n = (x.navigator.appVersion.match(/android/gi), x.navigator.appVersion.match(/iphone/gi)), v = x.devicePixelRatio;
v = n ? v >= ? : v >= ? : : , u = / v
}
if (r.setAttribute("data-dpr", v), !q) {
if (q = s.createElement("meta"), q.setAttribute("name", "viewport"), q.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), r.firstElementChild) {
r.firstElementChild.appendChild(q)
} else {
var m = s.createElement("div");
m.appendChild(q), s.write(m.innerHTML)
}
}
x.dpr = v, x.addEventListener("resize", function() {
clearTimeout(t), t = setTimeout(w, )
}, !), x.addEventListener("pageshow", function(b) {
b.persisted && (clearTimeout(t), t = setTimeout(w, ))
}, !), "complete" === s.readyState ? s.body.style.fontSize = * v + "px" : s.addEventListener("DOMContentLoaded", function() {
s.body.style.fontSize = * v + "px"
}, !), w()
}(window);
(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
//b.style.fontSize = 20 * (640 <= a ? 640 : a)/320 + "px" 这里设置的为根元素节点大小为20px，必须与样式里面的根节点样式大小一致，貌似不能通过document.documentElement.style.fontSize获取根节点元素字体大小只能手写，根元素大小*视口比例
b.style.fontSize = . * ( <= a ? : a) + "px"
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, )
});
a()
})();
根元素大小设置为多少，子元素的rem单位跟着一起变化扩大。我们这样设置：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: .4rem;/*1.4 × 10px = 14px */}
h1 { font-size: .4rem;/*2.4 × 10px = 24px*/}
达到的目的只是方便我们去计算，等同于现在html 的fontsize：10px； 但是元素h1大小为20px 那么我们就可以把h1设置为2rem
最后我还想谈一下，关于h5布局活动页面的问题：
先来两张图做对比吧：
chrome控制台 iphone4s
看到这两张图，可能我们不禁要问，问什么320*480下正常，到了微信上面为什么不正常了，主要是因为微信底部有个顶部条导致的高度为65px（320下），为了解决这个问题，我们可能就要通过视口@media query去媒介调整，但每次未免也太麻烦了。
为了解决这个问题，我们分析一下，通常设计师给我的设计稿可能有两种大小一种640*960 ，640*1136，如果说设计师在设计稿下大部分都填充了，那肯定会出现拥挤。其实我们应该这样做将布局分层三部分，顶部，中部，底部，让三者内容挨近保证能在带有微信底部条的960px下面不溢出，那么这样，我们就会少出现这些情况了。
但是我们即使基于如上我说的设计稿要求去做也会遇到问题，那就是我们做出来的在320*480下是展现正常的，但是在微信下顶部bar+电量高度为64px，则实际变成了320*416的尺寸，所以通常来说要进行缩放，我们可以单独基于iphone4s来做一个处理：
/* 兼容iphone4/4s */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:){
.page1inner{padding-top: 5rem;}
.page2inner{padding-top: %;}
.img-zhong{margin-bottom: }
.page3inner{padding-top: %;}
.img-jj{margin-bottom: %}
.img-shu{width: %; margin-bottom: %}
.page5inner{padding-top: ;}
.page6inner{ padding-top: 1rem;}
.img-hua{width: %; margin-bottom: }
.page8inner{padding-top: .5rem}
.page8-title{ margin-bottom: 1rem;}
.page7-text{top: %}
}
用zoom加强，对元素进行缩放
<script type="text/javascript">
!function(){
var cw=document.documentElement.clientWidth||document.body.clientWidth,zoom=cw/;
var ch= document.documentElement.clientHeight || document.body.clientHeight;
zoom = Math.min(cw/,ch/);
document.write('\
<style id="htmlzoom">\
html{font-size:'+(zoom*20)+'px;}\
.svn_wrp{zoom:'+(zoom/2)+';}\
</style>\
');
}();
</script>
另外两种通过缩放解决多屏下，元素尺寸缩放问题：
通过zoom解决的缩放问题：
<script>
(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
//b.style.fontSize = 20 * (640 <= a ? 640 : a)/320 + "px" 这里设置的为根元素节点大小为20px，必须与样式里面的根节点样式大小一致，貌似不能通过document.documentElement.style.fontSize获取根节点元素字体大小只能手写，根元素大小*视口比例
// b.style.fontSize = .0625 * (640 <= a ? 640 : a) + "px"
b.style.cssText="-webkit-transform: translate3d(0px, 0px, 0px);zoom:"+( <= a ? : a)/;
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, )
});
a()
})();
</script>
基于transform中scale进行缩放
<script>
(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
//b.style.fontSize = 20 * (640 <= a ? 640 : a)/320 + "px" 这里设置的为根元素节点大小为20px，必须与样式里面的根节点样式大小一致，貌似不能通过document.documentElement.style.fontSize获取根节点元素字体大小只能手写，根元素大小*视口比例
// b.style.fontSize = .0625 * (640 <= a ? 640 : a) + "px"
var p = ( <= a ? : a)/;
b.style.webkitTransform = "scale(" + p + ")";
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, )
});
a()
})();
</script>
这里这两种缩放一定要注意一个问题，就是html，body，容器都是width:100%,height:100%
//判断浏览器支持那个，然后加前缀
prefix=function(){
var style=document.body.style,vendor=["t","webkitT","mozT","oT","msT"],i=vendor.length;
while(i--)
{
if(typeof style[vendor[i]+"ransition"]!="undefined")
return vendor[i];
}
return vendor[];
}();