Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）

转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）"/>

Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）

一、首先下载 postcss-pxtorem

运行npm install postcss-pxtorem
完成下载之后，在package.json文件中添加这段代码

“postcss”: {“plugins”: {“autoprefixer”: {},“postcss-pxtorem”: {“rootValue”: 37.5, // 根元素大小1rem = 16px“propList”: ["*"]}}
},

然后在项目utils文件夹，创建rem.js文件
添加下列代码

function setRem() {let htmlWidth = document.documentElement.clientWidth || document.body.clientWidthlet htmlDom = document.querySelector(‘html’)htmlDom.style.fontSize = htmlWidth / 20 + ‘px’
}
setRem()window.onresize = function () {setRem()
}

然后在main.js中引入就可以啦
import ‘./utils/rem.js’
这样你就可以直接按照750设计稿来开发，不用再自己进行换算什么的。

移动端H5页面在PC端固定视图大小

一般公司开发移动端H5页面，都会给两个图，一个是移动端能看的，还有一个是在PC端能看的。当然主要是移动端为主，为了避免有客户在PC端打开这个网站，你的网页直接充满了整个页面，这样对用户的体验不好。
上方说的rem.js文件里面的clientWidth是浏览器窗口文档显示的宽度。而offsetWidth是根节点html元素对象的宽度。
我们把clientWidth改成offsetWidth。然后找到vue项目中的public文件夹里面的index.html，在这个文件中把html标签后面添加style=“max-width:750px ; margin: 0 auto”。
这样之后在PC端无论浏览器宽度有多大，它只会最大显示宽度为750px宽度时候的自适应样式。