Vue 移动端 rem 的配置

rem 布局原理

1. 使用媒体查询给不同的屏幕来设置不同的 html 的 font-size

2. 把开发使用到的 px 单位转成 rem 单位 组件库没法转

amfe-flexible 库

https://github.com/amfe/lib-flexible

安装

yarn add amfe-flexible

 在 main.js 中导入这个库

import 'amfe-flexible'

• 结果：会自动的给页面的 html 设置 font-size

• 比较麻烦的事情：我们设计稿量出来的尺寸，我们还需要自己把 px 转成 rem 单位

postcss 介绍

less/sass 是 css 的预处理工具 postcss 是 css 的后处理工具

1.postcss是一个 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理

2.postcss 的插件体系非常强大,目前已经有 200 多个功能各异的插件，开发人员还可以开发自己的插件。

1. Autoprefixer插件可以实现自动添加浏览器相关的声明前缀 -webkit -moz

2. PostCSS Preset Env插件可以让你使用更新的 CSS 语法特性并实现向下兼容

3. postcss-pxtorem可以实现将 px 转换为 rem

3.PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

4.Vue CLI 默认集成了 PostCSS 并且默认开启了 autoprefixer 插件

postcss-pxtorem

• 安装依赖包

yarn add postcss-pxtorem@5.1.1 -D

• 提供 postcss 的配置文件postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 1rem的大小  750
      rootValue: 37.5,
      propList: ['*'],
    },
  },
}