Vue页面自适应pc端不同分辨率尺寸方法

一、所需插件

  在vue项目中安装 px2rem-loaderpostcss-px2rem两个插件,这里用npm进行安装:

npm install px2rem-loader -S
npm install postcss-px2rem -S

二、引入自适应的JS文件

  在项目存放JS的文件目录下,新建pxrem.js文件,然后再main.js中进行引入。

//pxrem.js文件代码如下:

const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 页面宽度相对于 2048宽的缩放比例,根据需要修改。
  const scale = document.documentElement.clientWidth / 2048
  // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,根据需要修改)
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
//main.js中引入

import '@/assets/js/pxrem.js'

三、vue.config.js中进行配置

    若没有vue.config.js文件,则在该vue项目根目录下新建它,然后重新run一下vue项目,才能生效,具体配置如下: 

const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcssRem = px2rem({
  // 基准大小 baseSize,需要和rem.js中相同
  remUnit: 16
})
module.exports = {
	publicPath: "./",
	  lintOnSave: true,
	  css: {
	    loaderOptions: {
	      postcss: {
	        plugins: [
	          postcssRem 
	        ]
	      }
	    }
	}
}

四、使用注意

    完成以上的安装和配置,既可以进行页面的自适应 ,在页面样式css里自动会将px单位转换成rem的单位 ,可以在浏览器开发者工具F12看到,其实px已经被转为了rem。

   注意:一定要在css书写,写在行内的样式是不会被转成rem单位的,有些样式如果不生效,需要加上!import ,对于有的css样式不想被转换为rem可在相应的css后面加上/*no*/。

  • 4
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值