vue 中使用 rem 布局的两种方法

曾经终败给现在 2023-06-15 09:43 26阅读 0赞

在使用 vue-cli 开发 H5 项目时，需要进行 rem 适配，下面提供两种常用的方法（以 750 设计稿为例），希望对大家有所帮助。

**方法一：在 index.html 或者 main.js 中添加以下代码：**

**方法二：使用 lib-flexible 和 px2rem-loader 自动转换**

1.安装插件  
npm install lib-flexible --save  
npm install px2rem-loader --save-dev  
2.配置插件  
在入口文件 main.js 中引入 lib-flexible：

import 'lib-flexible/flexible'

3.在 build/utils.js 文件中配置 px2rem-loader：(75可以改成37.5)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70]  
安装并配置好 lib-flexible 和 px2rem 之后要重启一下项目，才能自动把 px 转换成 rem。  
内联的 px 样式不能自动转换。

另外，px 写法上会有些不同，大家可以参考 px2rem 官方介绍，下面简单介绍一下。

1.  直接写 px，编译后会直接转化成 rem；---- 【除下面两种情况，其他长度用这个】
2.  在 px 后面添加 /*no*/，不会转化 px，会原样输出； ---- 【一般 border 用这个】
3.  在 px 后面添加 /*px*/，会根据 dpr 的不同，生成三套代码。---- 【一般 font-size 用这个】

**示例代码**

/* 编译前 */
    .selector { 
        width: 150px;
        height: 64px; /*px*/
        font-size: 28px; /*px*/
        border: 1px solid #ddd; /*no*/
    }
    
    /* 编译后 */
    .selector { 
        width: 2rem;
        border: 1px solid #ddd;
    }
    [data-dpr="1"] .selector { 
        height: 32px;
        font-size: 14px;
    }
    [data-dpr="2"] .selector { 
        height: 64px;
        font-size: 28px;
    }
    [data-dpr="3"] .selector { 
        height: 96px;
        font-size: 42px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019112115573381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru,size_16,color_FFFFFF,t_70