移动端Web页面，即常说的H5页面、手机页面、webview页面等。
手机设备屏幕尺寸不一，在做移动端的Web页面时，需要考虑在安卓/IOS的各种尺寸设备上的兼容。
适配的目标就是做到在不同尺寸的手机设备上，页面“相对性的达到合理的展示”或者“保持统一效果的等比缩放“
介绍:
长度单位:px em rem
-
px在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小； -
em的值并不是固定的，会继承父级元素的字体大小，代表倍数； -
rem的值并不是固定的，始终是基于根元素<html>的，也代表倍数。
鉴于上述长度单位的特性，为了满足适配的要求，rem是最优的选择。
rem适配实现方式：
首先是如何将px转化成rem，举个例子来说，有一个image参数代码如下
.img{
width:320px;
height:160px;
}
那么如果你页面
html{
font-size：16px;
}
转化成rem为单位的话就是
.img{
width:20rem;
height:10rem;
}
可以很明显的得出一个公式： rem=px/font-size
当然上述只是举一个例子来讲述px和rem之间的转换关系。
下面是用sass的函数来计算px转rem，避免了一直手动计算
/*
* 此处 $base-font-size 具体数值根据设计图尺寸而定
* eg:若设计图为iPhone6(375*667)的二倍稿，则$base-font-size=32px
*/
@function px2rem($px, $base-font-size: 32px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2rem($px + 0px); // That may fail.
} @else if (unit($px) == rem) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
// 使用，eg:
font-size: px2rem(18px);
当然要做到页面自适应，我们还需要动态的去改变html的font-size。这里就要用到js去获取页面的宽度来设置font-size，代码如下：
<script>
$(window).load(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize", //旋转屏幕、大小变化
fn = function() {
var width = document.documentElement.clientWidth; //获取可见宽度
var height= document.documentElement.clientHeight;//获取可见高度
width && (docEle.style.fontSize = width / 23.437+ "px");//设置font-size
};
win.addEventListener(evt, fn, false); //添加事件
win.addEventListener('resize', fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window))
</script>
这个js主要的地方就是设置font-size时width所除之数。它的算法是屏幕分辨率/font-size
这里我依然用16和750的分辨率来举例。那么此js里的算式的除数就是 750/16=46.875。相应的在css中的px转rem就是我上面举的例子。
当然在具体环境的应用中，我不推荐用16px，原因是当屏幕分辨率较小时，font-size算出来的值会小于12，而在webkit的浏览器中设置有最小的font-size为12px，即当font-size小于12时仍以font-size:12px来显示，这就会导致显示出现问题。
