移动端设置-----rem

Posted 2020-06-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端设置-----rem相关的知识，希望对你有一定的参考价值。

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

rem是相对于根元素<html>

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

(function () {

var resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘;

var recalc = function () {

var clientWidth = document.body.clientWidth;

if(!clientWidth){

return;

}

document.documentElement.style.fontSize = 10 * (clientWidth/320)+ ‘px‘;

document.documentElement.style.visibility = ‘visible‘;

}

if(!document.documentElement.addEventListener){

return;

}

window.addEventListener(resizeEvt,recalc,false);

window.addEventListener(‘DOMContentLoaded‘,recalc,false);

})();

当设计给我psd时，测量文字为40px，html使用rem值=40/20=2rem。

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

以上是关于移动端设置-----rem的主要内容，如果未能解决你的问题，请参考以下文章

代码（移动端rem初始化设置1rem=15px）

Js动态设置rem来实现移动端字体的自适应代码