移动端rem屏幕大小适配？

最新推荐文章于 2024-07-21 14:16:06 发布

标题只用h1

最新推荐文章于 2024-07-21 14:16:06 发布

阅读量279

点赞数 1

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_58089129/article/details/124467692

版权

本文介绍了前端开发中实现屏幕适配的步骤，包括使用amfe-flexible进行px转rem的设置，以及通过postcss-pxtorem自动化转换px单位，确保在不同设备上页面布局的正确显示。同时，提供了根据设计稿尺寸调整rootValue的方法。

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

当我们在开发页面时都需要做屏幕适配，今天我就来分享一下，我在日常开发中的屏幕适配是如何做的。

第一步：在命令行输入命令下载包：

npm i amfe-flexible 或者 yarn add amfe-flexible

下载完之后在 main.js中引入包

import 'amfe-flexible' // rem屏幕适配包（只需要这一句，不需要返回值）

第二步：在命令行输入此命令：

npm i postcss-pxtorem -D 或者 yarn add postcss-pxtorem -D

(写代码时还是写px，在dom中显示的，是工具帮助转换成rem的样式)

然后进行基准值配置：在src同级创建一个文件：.postcssrc.js 然后cv下面代码

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

效果图：