Vue PC端自适应 1rem=100px_vue pc rem-CSDN博客

本文链接：https://blog.csdn.net/m0_48990893/article/details/137141165

本文介绍了如何在Vue项目中通过安装amfe-flexible和配置postcss-pxtorem来简化rem和px的换算，实现响应式设计。开发者在main.js中引入相关模块并设置1rem=100px，适用于PC端，移动端同样适用，欢迎交流改进意见。

摘要由CSDN通过智能技术生成

vue开发中，rem和px之间的换算太麻烦，为了方便开发，可以添加统一的配置：1rem=100px

1. 首先把安装amfe-flexible （自适应）

npm install amfe-flexible -S

2. 配置 postcss-pxtorem

postcss-pxtorem会将px转换为rem。

postcss-pxtorem 安装时需要注意选择版本，版本过高可能会导致报错。

npm install --save postcss-pxtorem@5.1.1

3. 在根目录(public)的index.html 的头部加入pc端适配的meta代码

初始设备宽度为1920px

<meta name="viewport" content="width=1920,user-scalable=no, viewport-fit=cover" />

4.src同级目录中创建 postcss.config.js 文件， Vue CLI 内部使用 PostCSS

默认开启了autoprefixer (浏览器前缀规则) -webkit- -moz-

module.exports = { plugins: { autoprefixer: {} } };

5.在src/utils/rem.js -- 设置1rem=100px

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 100) {
                docEl.style.fontSize = '100px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

6.在项目入口文件main.js 中引入amfe-flexible和rem.js

// px 转 rem
import 'amfe-flexible'
import "@/utils/rem.js";

个人记事：

这个只在PC端用过，移动端项目暂时没试过，不过原理都是一样的，理论上也是可以用在移动项目中。

在笔记中挺久了，今天整理一下发出来跟大家分享，如有问题，欢迎沟通~