移动端布局rem适配

您所在的位置：网站首页 › rem如何计算 › 移动端布局rem适配

移动端布局rem适配

2023-07-13 03:24| 来源: 网络整理| 查看: 265

（确定HTMl中的font-size大小）

REM适配是一种移动端开发中常用的适配方法。它是基于CSS中的相对单位REM（Root Em）进行布局调整，以适应不同设备的屏幕尺寸。

相对单位REM是相对于根元素（通常是HTML元素）的字体大小而言的。通常情况下，根元素的字体大小默认为16px。所以，如果你将一个元素的字体大小设置为2rem，它将相当于32px（2 * 16px）。

在REM适配中，一般会根据设备的屏幕宽度动态地计算并设置根元素的字体大小。这样可以根据屏幕的尺寸来进行响应式的布局调整。

1.创建项目安装插件

yarn add postcss-plugin-px2rem -Dyarn add lib-flexible

2.在根目录下创建 postcss.config.js 文件

3.添加如下配置

module.exports = { plugins: [ require('postcss-plugin-px2rem')({ //设计图宽度 750px -》75 430px-》43 rootValue: 54, //换算基数，默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 // unitPrecision: 5, //允许REM单位增长到的十进制数字。 //propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。 // propBlackList: [], //黑名单 // exclude: /(page_pc)/i, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值 exclude: /(node_modules|public)/i, // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小 // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。 // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。 mediaQuery: false, //（布尔值）允许在媒体查询中转换px。 minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。默认 0 }), ], }

4.运行项目 yarn serve

5.在 /mian.js 文件中添加

// 引入淘宝适配方案 import "lib-flexible"

6.在 App.vue 中测试

测试盒子 export default { } .box{ width: 270px; height: 270px; background-color: #a5c5d7; text-align: center; line-height: 270px; }

【本文地址】

移动端布局rem适配

移动端布局rem适配

今日新闻

推荐新闻