标签：... vue const 适配 js width setRem Rem postcss

1.下载postcss-pxtorem插件

npm install postcss-pxtorem --save-dev

2.package.json文件内配置postcss

{
  "name": "",
  "version": "",
  "private": ,
  "scripts": {
    ...
  },
  "dependencies": {
   ...
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75, // 换算的基数(设计图750的根字体为75)
        "propList": [
          "*"
        ]
      }
    }
  },
  "devDependencies": {
  ...
  }
}

引用rem.js

src/assets/setRem.js

const setRem = () => {
  const html = document.documentElement
  const width = html.getBoundingClientRect().width
  html.style.fontSize = width / 10 + 'px'
}
setRem()
window.addEventListener('orientationchange', setRem)

main.js中全局引用

import './assets/js/setRem'

标签：...,vue,const,适配,js,width,setRem,Rem,postcss
来源： https://blog.csdn.net/rxjly/article/details/115671054

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。