Vue 使用 rem 适配移动端的H5页面

一、先看效果：分别对iphone5 ， 6，7plus ，X四种屏幕尺寸进行适配

 二、适配步骤

1.安装 postcss-pxtorem  ：

npm i postcss-pxtorem -S

2.在src 目录下新建rem文件夹，并新建rem.js文件，并添加代码如下：

//基准大小，一般UI给的设计稿是750px，所以我们只需要相应 计算：eg  32px /100 =  0.32 rem 

const baseSize = 100

// 设置 rem 函数

function setRem() {

const salepro = document.documentElement.clientWidth / 750

// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改.最好和UI设计稿1:1尺寸设置 750px

// 设置页面根节点字体大小

document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

window.onresize = function () {

setRem()

}

3 .在项目根目录下新建  postcssrc.js文件，并添加如下代码：

module.exports = { "plugins": { "postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] } } }

4.在main.js中引入 

import '@/rem/rem.js'

5.在vue代码中，css中使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！