美文网首页
vue cli3移动端 中使用rem配置 以及适配方案!

vue cli3移动端 中使用rem配置 以及适配方案!

作者: 想成为咸鱼的张三 | 来源:发表于2020-11-10 15:19 被阅读0次

    转载自https://blog.csdn.net/qq_42957741/article/details/102392491

    第一步 安装

    npm  add postcss-px2rem
    

    第二步

    在 vue.config.js 中添加配置

    const px2rem = require('postcss-px2rem')
    
    const postcss = px2rem({
      remUnit: 32   //基准大小 baseSize,需要和rem.js中相同
    })
    
    module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              postcss
            ]
          }
        }
      }
    }
    

    第三步 index.html中

    <script>
              // 基准大小   1rem为32px 
            const baseSize = 32
            // 设置 rem 函数
            function setRem() {
              // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
              const scale = document.documentElement.clientWidth / 750
              // 设置页面根节点字体大小
              document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
            }
            // 初始化
            setRem()
            // 改变窗口大小时重新设置 rem
            window.onresize = function() {
              setRem()
            }
      
      </script>
    

    相关文章

      网友评论

          本文标题:vue cli3移动端 中使用rem配置 以及适配方案!

          本文链接:https://www.haomeiwen.com/subject/dbdjbktx.html