vue 移动端H5 布局 rem（postcss-px2rem）

黄同学real

已于 2023-04-26 15:53:56 修改

阅读量931

点赞数 1

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

于 2022-01-10 17:30:07 首次发布

本文链接：https://blog.csdn.net/qq_39939748/article/details/122415202

版权

vue 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

npm

7 篇文章 0 订阅

订阅专栏

vue 移动端H5 布局 rem（postcss-px2rem）

引入两个包

1. lib-flexible

lib-flexible 会自动在为你添加 meta name=“viewport” 的标签
同时会自动设置html的 font-size 为屏幕宽度除以10，也就是 1rem 等于html根节点的 font-size。
假如设计稿的宽度是375px，此时1rem应该等于37.5px。
假如设计稿的宽度是750px，此时1rem应该等于75px

2. postcss-px2rem

postcss-px2rem会将你代码中的px转换为rem

使用方法：

1、安装 flexible和 postcss-px2rem（命令行安装）

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

在这里插入图片描述

2、在项目入口文件main.js 中引入lib-flexible

  import 'lib-flexible'

由于 flexible 会动态给页面 header 中添加标签，所以务必请把目录 public/index.html 中的这个标签删除

3、配置 postcss-px2rem

修改 vue.config.js（vue-cli3 构建的项目比以前的精简许多，如果 没有请在根目录新建
在这里插入图片描述

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