移动端用rem适配方案

rem的大小是根据html的font-size所决定的，所以只要动态的获取屏幕的宽度从而改变font-size的大小，就可以适配移动端了，话不多说，直接上代码，以vue项目为例：

在assets里面创建rem.js文件

!function(n){
var e = n.document,
t = e.documentElement,
i = 750,
d = i / 100,
o ="orientationchange"in n?“orientationchange”:“resize”,
a = function(){
var n = t.clientWidth || (i/2);
n > 750 && (n = 750);
t.style.fontSize = n / d +“px”
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener(“DOMContentLoaded”,a,!1))
}(window);

然后再main.js文件里面引入即可

import Vue from ‘vue’
import “@/assets/js/rem”;

我们在公共样式里面创建一个pxToRem.scss文件或pxToRem.css

@function torem($px)
{
@return $px / 100px * 1rem;
}

在需要的文件中引入使用，这里用的px单位是根据项目的设计图来的

@import “@/style/public/pxToRem.scss”;
width:torem(100px)
height:torem(100px)

以上就是用rem适配移动端的方案了，感谢观看点赞支持！！！