vue页面自适应 动态 postcss postcss-pxtorem

vue页面自适应 动态 postcss postcss-pxtorem

postcss一款灵活配置css的插件,而postcss-pxtorem是属于postcss中的小工具可以动态将页面px转换为rem,现使用postcss-pxtorem实现页面自适应效果

postcss-pxtorem实现页面自适应

1、安装postcss-pxtorem

javascript 复制代码
npm install postcss-pxtorem --s

2、根目录创建postcss.config.js,并配置以下内容

javascript 复制代码
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 16, // 根元素字体大小,用于将像素转换为rem的基准值
      unitPrecision: 5, // rem的小数位数
      propList: ["*"], // 需要转换的属性列表,['*']表示所有属性都会被转换。
      selectorBlackList: [], // 需要忽略的选择器,可以是正则表达式或字符串
      replace: true, // 是否替换原始值
      mediaQuery: false, // 是否在媒体查询中转换px。
      minPixelValue: 0 // 小于或等于该值的像素单位不被转换。
    }
  }
};

3、创建rem.js,动态设置root px

javascript 复制代码
// 设置 rem 函数
function setRem() {
  // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16 这里是16就是初始化根元素px大小
  const screenWidth = 1920
  const scale = screenWidth / 16
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  // 得到html的Dom元素
  const htmlDom = document.getElementsByTagName('html')[0]
  // 设置根元素字体大小
  htmlDom.style.fontSize = htmlWidth / scale + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', ()=>{
  setRem()
})

4、在main.js中引入rem.js

javascript 复制代码
import '@/utils/rem.js'

此时打开调试工具会发现px已经全部被转换为rem,也基本可以实现页面自适应变化了

注:postcss-pxtorem无法将内联样式转换为rem,此时需要额外单独处理

5、在main.js中创建全局处理函数px2rem

javascript 复制代码
function px2rem(px){
  if(/%/ig.test(px)){ // 有百分号%,特殊处理,表述pc是一个有百分号的数,比如:90%
    return px
  }else{
    return (parseFloat(px) / 16) + 'rem' // 这里的16就是初始化根元素px大小
  }
}
Vue.prototype.$px2rem = px2rem // 放到全局

6、对内联样式使用px2rem

html 复制代码
<span :style="{'margin-left': $px2rem('20px')}">内联样式</span>

到此结束,页面基本可以实现自适应!!!
若部分元素无法自适应,则可能是没有设置width、height

相关推荐
懒大王爱吃狼19 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式