vue项目转rem；H5配置rem；px转rem

i_am_a_div_日积月累_

已于 2022-12-13 17:09:10 修改

阅读量1.1k

点赞数 1

分类专栏： css vue 文章标签： vue.js javascript 前端

于 2022-09-16 17:02:27 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/126893495

版权

vue 同时被 2 个专栏收录

104 篇文章 5 订阅

订阅专栏

css

18 篇文章 1 订阅

订阅专栏

H5可以配合vant组件库书写项目，和使用rem后vant组件样式变小了解决办法。（引入方式）

以下是配置rem步骤：

1.安装 flexible和 postcss-px2rem（命令行安装）
lib-flexible 会自动在为你添加 meta name=“viewport” 的标签
同时会自动设置html的 font-size 为屏幕宽度除以10，也就是 1rem 等于html根节点的 font-size。
假如设计稿的宽度是375px，此时1rem应该等于37.5px。
假如设计稿的宽度是750px，此时1rem应该等于75px
。
postcss-px2rem会将你代码中的px转换为rem

  npm install lib-flexible --save
  npm install postcss-px2rem --save

2.在项目入口文件main.js 中引入lib-flexible
由于 flexible 会动态给页面 header 中添加 meta name=“viewport”，所以务必请把目录 public/index.html 中的这个标签删除--------但是可能也没有影响，先不删除试试，如果不行在删除试试。

  import 'lib-flexible'

3.配置 postcss-px2rem
修改 vue.config.js（vue-cli3 构建的项目比以前的精简许多，如果没有请在根目录新建此文件即可）

vue.config.js：配置75

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 75
          })
        ]
      }
    }
  }
}