转化成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宽度时候的自适应样式。
更多推荐
Vue项目中750设计稿px自动转化成rem方法(小白一个,记录自己遇到的小白问题,大家勿怪)
发布评论