WebApp 使用post-css实现移动端适配

1、npm安装 post-css

npm i postcss autoprefixer postcss-pxtorem -D

2、新建配置文件 postcss.config.js

/* eslint-env node */

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      // 根节点的 fontSize 值
      rootValue: 16,
      propList: ['*'],
      selectorBlackList: [':root']
    }
  }
}

3、 main.js中加入

// 实现不同设备的适配
const rootValue = 16     // 1rem
const rootWidth = 390    // 设计稿宽度
const deviceWidth = document.documentElement.clientWidth  //用户宽度
document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + 'px'

相关推荐

  1. WebApp 使用post-css实现移动

    2024-05-16 06:12:08       6 阅读
  2. 移动方案

    2024-05-16 06:12:08       3 阅读
  3. vue开发的PC项目使用postcss-to-viewport移动

    2024-05-16 06:12:08       29 阅读
  4. vue pc-移动-ipad

    2024-05-16 06:12:08       30 阅读

最近更新

  1. .Net Core WebAPI参数的传递方式

    2024-05-16 06:12:08       0 阅读
  2. QT--气泡框的实现

    2024-05-16 06:12:08       1 阅读
  3. LeetCode 968.监控二叉树 (hard)

    2024-05-16 06:12:08       0 阅读
  4. leetcode热题100.完全平方数(动态规划进阶)

    2024-05-16 06:12:08       0 阅读
  5. leetcode328-Odd Even Linked List

    2024-05-16 06:12:08       0 阅读
  6. C 语言设计模式(结构型)

    2024-05-16 06:12:08       0 阅读
  7. v-if 与 v-show(vue3条件渲染)

    2024-05-16 06:12:08       0 阅读
  8. kafka防止消息丢失配置

    2024-05-16 06:12:08       0 阅读

热门阅读

  1. 15. 三数之和

    2024-05-16 06:12:08       4 阅读
  2. docker版MySQL5.7重置root密码并授权localhost访问

    2024-05-16 06:12:08       2 阅读
  3. Qt初识

    Qt初识

    2024-05-16 06:12:08      4 阅读
  4. 时间格式数据向前或向后归于整时

    2024-05-16 06:12:08       3 阅读
  5. Zookeeper笔记,MIT6.824

    2024-05-16 06:12:08       3 阅读
  6. Go 语言将 PDF 转为 Word 如何处理

    2024-05-16 06:12:08       3 阅读
  7. hashmap数据结构为什么是链表

    2024-05-16 06:12:08       4 阅读