利用rem实现h5自适应

利用rem实现h5自适应

最近做h5比较多，从老大那里学到一招，超级实用。快速h5像素级切图，不用在费力地计算rem值啦。

REM

css中的rem 可以让文字根据根节点html的font-size属性来计算像素值。
例如：

html{
    font-size:10px;
}
.div{
    height:1rem;
}

这里的1rem 为10px，以此类推，1.5rem 为15px
总结的转换公式 为：
(n)rem =( rootFontSize * n)px

自适应函数

一张设计图要去适应不同的屏幕尺寸，网页就要设置不同的字体基值。
示例：
如果设计图页面的宽度是640，则在页面中添加如下代码。

setAdaption(6.4);

selfAdaption 实现代码如下:

function setAdaption(baseFontsize) {
    baseFontsize = baseFontsize || 7.5;
    var docEl = document.documentElement;
    var refresh = function() {
        var dpr = window.devicePixelRatio,
            deviceWidth = docEl.getBoundingClientRect().width, //获得屏幕宽度
            deviceFontsize = deviceWidth / baseFontsize + "px"; //计算rem基准值
        docEl.setAttribute('data-dpr', dpr);
        docEl.style.fontSize = deviceFontsize; //设置rem基准值
    };

    window.addEventListener('pageshow', function(e) {
        if (!e.pretersised) {
            refresh();
        }
    }, false);
    window.addEventListener('resize', function() {
        refresh();
    }, false);
}

window.devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

SASS

使用sass可以更好的计算rem

设计图中banner 的高宽，是640*401,那么我们只需要给banner设置 设计图中实际的高宽 就可以了。

sass 文件如下：

$baseFontsize:100px; /*设置为100px 为了更方便计算*/
//function
@function px2rem($pixel) { /*像素值转rem值*/
  @if (unitless($pixel)) {
    $pixel: $pixel*1px;
  }
  @return $pixel/$baseFontsize *1rem;
}
//mix
@mixin bgs($url){ /*设置背景*/
  background-image: url($url);
  -webkit-background-size:100%;
  background-size:100%;
}
/*设置一个banner的高宽*/
.banner {
    @include bgs('/res/images/activities/daimeiLive/bar.png');
    height: px2rem(401);
    width: px2rem(640);
  }

sass编译成css的结果为：

理解

我们先设定一些值。
设计图尺寸宽：PicWidth;
设计图字体基值：PicBaseFontSize; （即在sass中设置的$baseFontsize ）
屏幕宽：DeviceWidth;（docEl.getBoundingClientRect().width）
屏幕字体基值：DeviceBaseFontSize; （我们要设置的值docEl.style.fontSize = deviceFontsize;//设置rem基准值）

他们存在下面这样的关系

这样就可以实现页面的自适应了，很方便。

文字太混乱了，这篇博文写得更加清晰。参考链接移动web适配利器-rem