手淘的移动端适配方案flexible

最新推荐文章于 2023-10-08 10:17:10 发布

转载最新推荐文章于 2023-10-08 10:17:10 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuyishi/p/9573111.html

文章标签：

#webpack #ViewUI

本文介绍如何使用Vue结合lib-flexible和px2rem-loader实现移动端页面的自适应布局。通过安装并配置相关依赖，可以轻松将设计稿中的px单位转换为rem单位，实现不同设备屏幕尺寸下的良好显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

安装 flexible
```
npm install lib-flexible --save
```
引入 flexible
在项目入口文件 main.js 中添加如下代码，引入 flexible
```
import 'lib-flexible'
```
px 转 rem
使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem
安装 px2rem-loader
```
npm install px2rem-loader --save-dev
```

配置 px2rem-loader
在 vue-cli 生成的文件中, 找到以下文件 build/utils.js, 如下添加配置

const px2remLoader = {
loader: 'px2rem-loader',
options: {
      remUnit: 75  // 1rem=多少像素 这里的设计稿是750px。
    }
}
function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
            })
          })
        }
    }

px2rem 用法

安装 px2rem 后，再使用 px 上有些不同,下面简单介绍一下。
直接写 px，编译后会直接转化成 rem ---- 除开下面两种情况，其他长度用这个
在 px 后面添加/no/，不会转化 px，会原样输出。 --- 一般 border 需用这个
在 px 后面添加/px/, 会根据 dpr 的不同，生成三套代码。---- 一般字体需用这个

示例代码
```
/** 编译前 **/
.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
/** 编译后（打包后的代码）**/
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}
```
重启项目，就可以愉快的用设计稿上的 px 了。
注意：
不能在 index.html 的头部加 name 为 viewport 的 meta 标签，flexible 会自动为我们添加！