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

朱雀 2023-10-02 23:41 162阅读 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 条评论，162人围观）

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

相关阅读

相关移动端页面适配(px2rem)

1、安装引入lib-flexible . 　　安装lib-flexible：　　npm i lib-flexible --save

快来打我*/ 2022年12月16日 13:12/ 0 赞/ 202 阅读

相关 Html5移动端网页端适配(js+rem)

业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js

￡神魔★判官ぃ/ 2022年10月27日 05:25/ 0 赞/ 258 阅读

相关 vue+vant适配移动端REM

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

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

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

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

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

相关【移动端适配方案二弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）

前端开发工程师根据UI设计师给的设计稿进行开发。为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS 实现如下： 1、设置width=devi

电玩女神/ 2022年05月21日 00:08/ 0 赞/ 393 阅读

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

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

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

相关 vue移动端适配 -- px2rem

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

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

相关移动端适配rem与em

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

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

相关 web移动端rem的适配

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

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

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

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

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