利用rem实现h5自适应

来源：互联网发布：tower git for mac 编辑：程序博客网时间：2024/05/19 02:42

利用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

0 0