移动端设置-----rem

时间:2022-10-19 20:22:48

对于现在不同尺寸的移动端屏幕,如果设置px来说实在有点影响用户体验,在小屏幕上太大,大屏幕上太小,不能实现响应式,所以就引进了rem的概念。

rem是相对于根元素<html>

在我的项目中就是用这样的一段js代码。

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, user-scalable=no" />

将上面代码拷在html的head里,意思是可视区域的宽度等于设备的宽带,禁止缩放,最大缩放为1,最小也是1,默认比例是1.

 (function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
}; // Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

当设计给我psd时,测量文字为40px,html使用rem值40px/100 = 0.4rem。

rem其实不单只能使用在文字的单位,还可以用于height,width,padding,marigin,line-height等的单位。