Vue中移动端，只用px即可实现适配，摆脱响应式的困难！

最新推荐文章于 2025-11-28 01:16:53 发布

原创最新推荐文章于 2025-11-28 01:16:53 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了移动端适配的原理，通过使用lib-flexible和postcss-px2rem插件，教你如何在不同设备上保持一致的样式。重点讲解了如何调整根元素字体大小并转换px单位，以及在vue.config.js中配置px2rem的过程。

*前言：

适配解释：所谓移动端适配就是能够在不同手机尺寸中达到同样的样式效果，避免在大屏幕手机中，字体太小，小屏幕手机中，字体太大等等问题。
实现原理：通常使用的是px单位，但适配中是用rem单位来做的，因为rem单位是font size of the root element （根元素的字体大小），意思是每个浏览器有不同的默认根节元素的字体大小，假如你的浏览器的默认根元素字体大小是12px，那么1rem = 12px。假如你的按钮大小宽高分别是1rem * 1rem，换算过来就是12px * 12x，那假如我把根元素的默认字体大小改成16px呢，那我的按钮大小宽高岂不应该是16px * 16px？所以原理就是这样，就是根据不同屏幕宽高，改变它的根元素的字体大小，然后其他地方都该成rem单位，但是呢rem单位我们用的很不习惯，所以又要想办法把rem单位改成我们熟悉的px单位。

步骤：

1、首先下载两个辅助插件

npm i lib-flexible -S

npm i postcss-px2rem -S

lib-flexible插件是用来改变html根节点的font-size大小的
postcss-px2rem插件是用来把我们css中写的px单位自动换算成rem

2、引入lib-flexible插件

打开你的main.js文件，添加import 'lib-flexible'

import 'lib-flexible'

在这里插入图片描述

3、修改lib-flexible源码，此步可以省略

解释：因为lib-flexible这个插件主要是用来做手机自适应的，所以一部手机它的屏幕是有用上限的，你的手机屏幕不可能无限大把，所以当手机屏幕尺寸大于540px的时候，源码当中就把html根元素的字体大小写死为54px了，但是如何我们要做响应式pc端的话，屏幕最大肯定不止540px这么点点。所以如果只是想单纯想做手机端的话，此步骤可忽略。

打开node_modules文件夹中，去找lib-flexible插件文件夹下的flexible.js文件，如下：
在这里插入图片描述

在这里插入图片描述
ctrl+F查找function refreshRem

function refreshRem

在这里插入图片描述

4、配置postcss-px2rem

在你的项目找到vue.config.js文件，如果找不到就自己新建一个，因为在vue-cli3以上创建的项目中，这个文件是个可选文件。找到后(新建好后)加入如下代码：

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  },
}