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方法（小白一个，记录自己遇到的小白问题，大家勿怪）相关推荐

前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
vue项目中svg图（svg标签）的使用方法
几天前,ui无法把我拉进项目iconfont库,只好切了一份svg图包给我,于是琢磨了怎么用,简单地记录一下其实所在项目什么都配置好了,真正用到的只有最后一项 1. 安装依赖 npm install ...
Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明: 当在渲染一个路由的过程中,需要尝试解析一个异步组件时发 ...
vue项目中videoPlayer 的 src 视频地址参数动态修改---方法
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单. this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用*号框起 ...
4.Vue项目中下载本地pd、word、excel文件
记录:Vue项目中下载本地pdf.word.excel文件今日的一个需求是下载导入模板文件,该模板文件不是接口请求获取,而是本地的文件该文章属转载:Vue下载本地pdf.word.excel文件 ...
vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
vue项目中自动拉取更新Iconfont（阿里巴巴图标库）
在vue项目中使用 iconfont图标库,网上的栗子很多,这边就随手给一个,点这里上面的解决了,那我就很苦恼,我每次添加或删除或更新图标库,需要重新下载?自己手动去覆盖吗?我是拒绝的.so,自 ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

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

一、首先下载 postcss-pxtorem

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

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

最新文章

热门文章