vue项目，移动端rem适配（rem移动端适配）

朱雀 2023-10-02 23:41 179阅读 0赞

**1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下：**

//可以将 px 单位自动转化为 rem 单位
    npm install postcss --save-dev 
    npm install postcss-pxtorem@5.1.1 --save-dev
    
    //还需要安装 amfe-flexible，安装引入后，单位转化才可以使用
    npm i amfe-flexible --save

\--save-dev 是安装在开发环境下，项目打包的时候 不会被打包进dist文件夹；  
\--save 的意思是安装在生产环境下，项目打包的时候 会被打包进dist文件夹；

**要安装这三个插件 px才能自动的转化为rem ，这些工具帮助我们自动实现移动端适配的；**

**2、在 main.js 中引入 amfe-flexible，如下：**

import Vant from "vant"; // 整体导入vant组件库
    import "vant/lib/index.css"; // 引入vant样式表
    
    //引入rem转化工具
    import "amfe-flexible";

**3、然后在根目录下创建一个postcss.config.js文件（该文件项目启动后会自动运行），如下：**

module.exports = {
      plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        "postcss-pxtorem": {
          rootValue({ file }) {
            // 判断是否是vant的文件，如果是就使用 37.5为根节点字体大小
            // 否则使用75 因为vant使用的设计标准为375，但是市场现在的主流设置尺寸是750
            return file.indexOf("vant") !== -1 ? 37.5 : 75;
          },
          // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
          propList: ["*"],
        },
      },
    };

**配置完成后需要重新启动项目，方能生效。**

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端 rem 适配方案

前端面试移动端rem适配方案 1.适配方案移动端的适配方案： 1.flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场最多 2.flex

柔光的暖阳◎/ 2024年03月01日 04:18/ 0 赞/ 20 阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 180 阅读

相关 vue如何实现移动端rem适配

在自己的项目中新建一个叫utils的文件夹，里面新建一个rem.js，一般utils文件夹都是存放公用方法的,在rem.js写： (function(document

秒速五厘米/ 2023年06月17日 14:56/ 0 赞/ 21 阅读

相关 vue+vant适配移动端REM

第一步：下载 npm i -S amfe-flexible 第二步：在main.js里面引入 import ‘amfe-flexible’ 第三步：下载 npm insta

谁借莪１个温暖的怀抱￠/ 2022年10月20日 01:14/ 0 赞/ 212 阅读

相关 js 移动端适配（动态rem）

(function (doc, win) { var docEl = doc.documentElement,

小鱼儿/ 2022年06月08日 22:23/ 0 赞/ 289 阅读

相关移动端 rem.js动态控制适配

直接上代码： (function remYS(doc, win) { var docEl = doc.documentElement

谁借莪１个温暖的怀抱￠/ 2022年05月08日 08:14/ 0 赞/ 313 阅读

相关 vue移动端适配 -- px2rem

vue移动端适配 -- px2rem 安装 npm install px2rem-loader lib-flexible --save 在main.js中引入 i

朱雀/ 2022年04月15日 00:48/ 0 赞/ 341 阅读

相关移动端适配rem与em

前言在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。兼容性 ios：6.1系统以上都支持 android：2.1

川长思鸟来/ 2022年02月19日 00:05/ 0 赞/ 385 阅读

相关 web移动端rem的适配

\\ 需求: 随着移动端设备的变化，内容也跟着变化。 \\ 先来说说rem单位，以rem为单位，其大小是根据根元素（html标签）的字体大小来判断的，

左手的ㄟ右手/ 2021年11月23日 21:12/ 0 赞/ 431 阅读

相关 rem.js 移动端rem适配js代码

js !(function(win, doc) { function setFontSize() { // 获取windo

怼烎@/ 2021年07月27日 01:50/ 0 赞/ 536 阅读