zoukankan      html  css  js  c++  java
  • vue 移动端屏幕适配 使用rem

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了

    如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招。

    postcss-pxtorem:转换px为rem的插件

    安装 postcss-pxtorem

    npm install postcss-pxtorem --save

    新建rem.js文件

    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()
    }

    并引用进main.js文件内

    import './rem'

     修改.postcssrc.js 文件

    .postcssrc.js文件内的 plugins 添加以下配置,配后就可以在开发中直接使用 px 单位开发了

        "postcss-pxtorem": {
          "rootValue": 32,
          "propList": ["*"]
        }

    helloworld.vue

    <template>
      <div class="hello">
        test
      </div>
    </template>
    
    <script>
      export default {
        name: 'HelloWorld',
        data() {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        }
      }
    </script>
    
    <style scoped>
      .hello {
        text-align: center;
        font-size: 20px;
        width: 300px;
        height: 400px;
        background:red;
      }
    </style>

    效果

    此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

    如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力

  • 相关阅读:
    外包、构件和黑盒抽象等杂想
    C++类型转换小记(一)——C++转换操作符
    大学(一)
    【答】如何获取一个【备份路径】的信息?
    橘色超漂亮滑动二级导航菜单
    CSS自适应宽度按钮
    我们忽略的IE特效——一些特殊效果
    MSSQL 游标示例
    [存]超酷JS拖拽翻页效果
    漂亮的表格
  • 原文地址:https://www.cnblogs.com/huangenai/p/9700883.html
Copyright © 2011-2022 走看看