利用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是设备上物理像素和设备独立像素(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