Vue项目中750设计稿px自动转化成rem方法(小白一个,记录自己遇到的小白问题,大家勿怪)
2020-06-08 05:08
501 查看
一、首先下载 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.clientWidth let 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宽度时候的自适应样式。
相关文章推荐
- 小白记录一下自己学习过程中遇到的for循环异步传参问题以及解决方法
- 这个常见的错误。大家记录下自己曾遇到的这样问题的解决方法
- 最近想写一个邮箱自动验证功能,在网上看了很多,写到自己上面出了很多问题,记录下来给后面的人一个参考
- 记录下自己遇到的问题和解决方法
- 自己遇到的一个单例模式的问题记录
- 在做项目过程遇到的相关问题___只记录问题,后期补上方法
- 记录vue项目中遇到的一点小问题
- 遇到的一个设计问题,两种方法的实现
- vue项目部署上线遇到的问题及解决方法
- Vue 项目中遇到的跨域问题及解决方法(后台php)
- 记录一下自己在php中设置cookie遇到的一个问题
- 【边做项目边学Android】小白会遇到的问题--创建Android项目不自动生成Activity,layout目录为空
- C#中ArrayList 与 string、string[]数组 的转换 (转学习:今天做项目时遇到一个arrylist转换问题,做记录)
- 使用Ant自动打包项目遇到的一个问题,备案!
- 以前从来没有写东西的习惯,从今天开始,把自己开发中遇到的问题及解决方法和心得记录下来!
- vue-cli开发web项目所遇到的问题解决办法记录(一)
- 对vue项目(增加/进行)单元测试,所遇到的问题及解决方法。 dom节点为null等
- VUE+SSM 以VUE做项目前端,SSM做后端框架,难点在于数据的传输处理,下面我记录一下一个简单的登录退出功能的实现,如果有缺陷还请大佬指出,个人菜鸟 一个,正在学习当中,以此记录一下自己的学习
- Linux环境下段错误的产生原因及调试方法小结 最近在Linux环境下做C语言项目,由于是在一个原有项目基础之上进行二次开发,而且项目工程庞大复杂,出现了不少问题,其中遇到最多、花费时间最长的问题就是
- Vue项目自动转换 px 为 rem的实现方法