基于vue-cli配置lib-flexible + rem实现移动端自适应

最新推荐文章于 2024-07-16 09:25:17 发布

网络真危险！！

最新推荐文章于 2024-07-16 09:25:17 发布

阅读量1.3k

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_55846296/article/details/130891705

版权

基于vue-cli配置lib-flexible + rem实现移动端自适应

一、前言：
二、实现步骤：

一、前言：

移动端项目需要进行自适应设计，其核心就在于使用 rem 单位进行布局。而要使用 rem 单位，就需要在项目中引入 lib-flexible组件，使用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整。

二、实现步骤：

下面是基于 Vue CLI 配置 lib-flexible 实现移动端自适应的方法。

1. 安装 lib-flexible 插件

我们可以使用 npm/yarn 安装 lib-flexible 依赖：

# 使用 npm 安装
npm install lib-flexible --save

# 或者使用 yarn 安装
yarn add lib-flexible

2. 在 main.js 入口文件中引入 lib-flexible

在 main.js 中，需要引入 lib-flexible 模块，并且设置 dpr 和 scale 字段。其中，dpr 表示设备像素比，scale 表示 viewport 缩放比。

import 'lib-flexible/flexible.js'

3. 设置 HTML 根节点的 font-size

在 HTML 根节点中设置 font-size，该值需要通过 JavaScript 动态计算获得。可以使用 HTML 中的 data-dpr 和 data-scale 属性，结合 JavaScript 中的计算公式来实现动态设置。

下面是设置根元素大小的一个示例代码：

<!DOCTYPE html>
<html data-dpr="1" data-scale="1">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>移动端自适应</title>
    <script type="text/javascript">
      (function () {
        var baseFontSize = 100
        var baseWidth = 750
        var rootEl = document.documentElement
        var scale = rootEl.getAttribute('data-scale')
        var dpr = window.devicePixelRatio
        var scale = 1 / dpr
        var metaEl = document.querySelector('meta[name="viewport"]')
        var fontEl = document.createElement('style')
        var baseRem = (baseWidth / baseFontSize).toFixed(6)
        var rem = rootEl.clientWidth / baseWidth * baseFontSize
        rootEl.setAttribute('data-dpr', dpr)
        rootEl.setAttribute('data-scale', scale)
        // 设置 meta 标签
        metaEl.setAttribute('content', `width=device-width,initial-scale=${scale},
                              minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`)
        // 设置 rem
        fontEl.innerHTML = `html{font-size:${rem.toFixed(2)}px !important;}`
        document.head.appendChild(fontEl)
      })()
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在上述代码中，定义了一个立即执行函数，该函数中通过计算获得当前浏览器的设备像素比 dpr 和 viewport 缩放比 scale，并利用这些值计算出 HTML 根元素的字体大小 font-size。最后再将计算结果插入 HTML 根元素的 style 中。

4. 安装 postcss-pxtorem

如果不想手动计算 rem 值，可以使用 postcss-pxtorem 插件自动将 px 值转换为 rem 值。需要先安装 postcss-pxtorem：

# 使用 npm 安装
npm install postcss-pxtorem --save-dev

# 或者使用 yarn 安装
yarn add postcss-pxtorem --dev

5、配置 postcss.config.js

在项目根目录下添加 postcss.config.js 文件，该文件的内容如下：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度除以10，根据需要调整
      propList: ['*'],
      exclude: /node_modules/
    }
  }
}

该配置文件使用 postcss-pxtorem 插件将 css 样式中的 px 转换为 rem，其中 rootValue 表示根元素的 font-size 值，需要根据设计稿的宽度进行计算，例如设计稿宽度为 375px，则 rootValue 为 37.5。propList 表示哪些属性需要转换，* 表示所有属性都需要转换。exclude 表示不需要转换的文件路径，例如 node_modules 目录下的文件不需要转换。

6、配置 vue.config.js

在项目根目录下添加 vue.config.js 文件，该文件的内容如下：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ['*'],
            exclude: /node_modules/
          })
        ]
      }
    }
  }
}

该配置文件与上述的 postcss.config.js 文件相似，只不过这里的配置是在 Vue CLI 中实现的。直接配置 css.loaderOptions.postcss.plugins 即可。

7、编写样式

在 css 样式中，按照设计稿的尺寸使用 px 单位进行布局。例如，设计稿中某个元素的宽度为 100px，则在样式中使用如下代码进行定义：

.example {
  width: 100px;
}

postcss-pxtorem 插件会自动将其转换为 rem 单位。

通过以上配置，就可实现基于 vue-cli 配置 lib-flexible + rem 实现移动端自适应的效果。

网络真危险！！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于vue-cli配置lib-flexible + rem实现移动端自适应

移动端项目需要进行自适应设计，其核心就在于使用 rem 单位进行布局。而要使用 rem 单位，就需要在项目中引入 lib-flexible组件，使用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整。
复制链接

扫一扫