vue项目可视化管理(vue ui)实现移动端适配px2rem

最新推荐文章于 2024-04-28 03:16:16 发布

Argent_

最新推荐文章于 2024-04-28 03:16:16 发布

阅读量663

点赞数 1

分类专栏： vue # vue-cli

本文链接：https://blog.csdn.net/qq_35697034/article/details/102796096

版权

vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue-cli

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用vue UI搭建项目，并详细阐述了项目搭建完成后，通过引入lib-flexible和配置postcss-px2rem来实现移动端的px到rem的自动转换，以达到适配不同屏幕尺寸的效果。

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

搭建项目可以参考vue UI 告别webpack配置，这里就不多说明了。

下面说明项目搭建成功后的适配方案：

一、项目中引入lib-flexible

项目中安装lib-flexible
在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible/flexible'

如果想要大屏幕展示，可参考在vue中使用flexible响应式布局——默认html字体大小（font-size)是54px的问题

二、使用postcss-px2rem自动将css中的px转换成rem

安装postcss-px2rem
项目配置postcss

在vue.config.js（项目创建完初始是没有这个js文件的，需要自己手动创建，如上图）中配置，代码如下：

module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
             plugins: [
              require("postcss-px2rem")({
                remUnit: 75
          })
        ]
      }
    }
}