移动端rem适配(关于PostCSS文件配置)

4005

移动端 REM 适配

  1. Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:

    • lib-flexible 用于设置 rem 基准值,设置根字体的大小

    • postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem

      自动将px单位转换成rem

使用 lib-flexible 动态设置 REM 基准值

html 标签的字体大小

  1. 安装

    // yarn add amfe-flexible
    ​
    npm i amfe-flexible -S
    
  2. 然后在 main.js 中加载执行该模块

    import 'amfe-flexible'
    
  3. 最后测试:在浏览器中切换不同的手机设备尺寸,观察 html 标签 font-size 的变化

    • 例如在 iPhone 6/7/8 设备下,html 标签字体大小为 37.5 px

      原理:是将一行分成10份 例如 375/10=37.5

      image-20210821090630364

使用 postcss-pxtorempx 转为 rem

  1. 安装

    // yarn add -D postcss-pxtorem
    // -D 是 --save-dev 的简写
    //注意需要指定版本 否则可能会报错
    ​
    npm install postcss-pxtorem@5.1.1 -D
    

    postcss-pxtorem 的版本为 postcss-pxtorem@5.1.1

  2. 然后在项目根目录中创建 .postcssrc.js 文件

    module.exports = {
      plugins: {
        'autoprefixer': {
          browsers: ['Android >= 4.0', 'iOS >= 8']
        },
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }
    

    注意 行内样式的单位不会转换 例如:<div style="width:200px;"></div>

  3. 配置完毕,重新启动服务

    npm run serve
    
  4. 最后测试:刷新浏览器页面,审查元素的样式查看是否已将 px 转换为 rem

    • 转换之前的样式

      image-20210821101228618

    • 转换之后的样式

image-20210821101100409

  1. 注意事项:

    • 该插件不能转换行内样式中的 px,例如 <div style="width: 200px;"></div>

.postcssrc.js 配置文件

.postcssrc.js 的配置

  1. .postcssrc.js 是 PostCSS 的配置文件,具体配置如下

    module.exports = {
      plugins: {
        'autoprefixer': {
          browsers: ['Android >= 4.0', 'iOS >= 8']
        },
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }
    ​
    

注意在vue-cli中默认开启了 autoprefixer这里会引起编译器警告详情参考下述Autoprefixer 插件的配置

PostCSS 介绍

  1. PostCSS 介绍

    • PostCSS 是一个处理 CSS 的处理工具,本身功能比较单一,它主要负责解析 CSS 代码,再交由插件来进行处理,它的插件体系非常强大,所能进行的操作是多种多样的,例如

    • 目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要,开发出自己的 PostCSS 插件

  2. PostCSS 一般不单独使用,而是与已有的构建工具进行集成

Autoprefixer 插件的配置

  1. autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件,browsers 用来配置兼容的浏览器版本信息

023 - autoprefixer

  1. 但是写在这里的话会引起编译器警告

    • 警告意思就是说你应该将 browsers 选项写到 package.json.browserlistrc 文件中
    • Vue-cli 中已经默认开启了 autoprefixer,所以把这两行代码注释
    • 注释后重启服务就可以解决掉警告信息

024 - autoprefixer 警告

postcss-pxtorem 插件的配置

  1. postcss-pxtorem 插件的配置

    • rootValue:表示根元素字体大小,它会根据根元素大小进行单位转换

    • propList 用来设定可以从 px 转为 rem 的属性

      • 例如 * 就是所有属性都要转换,width 就是仅转换 width 属性

    025 - postcss-pxtorem

  2. rootValue 应该如何设置呢

    如果你使用的是基于 lib-flexable 的 REM 适配方案,则应该设置为你的设计稿的十分之一。
    例如设计稿是 750 宽,则应该设置为 75。
    

    大多数设计稿的原型都是以 iphone6 为原型,iphone6 设备的宽是 750,我们的设计稿也是这样。

    但是 Vant 建议设置为 37.5,为什么呢?

    因为 Vant 是基于 375 写的,所以如果你设置为 75 的话,Vant 的样式就小了一半。
    

    所以如果设置为 37.5 的话,Vant 的样式是没有问题的,但是我们在测量设计稿的时候都必须除2才能使用,否则就会变得很大。

    这样做其实也没有问题,但是有没有更好的办法呢?我就想实现测量多少写多少(不用换算)。于是聪明的你就想,可以不可以这样来做?

    • 如果是 Vant 的样式,就把 rootValue 设置为 37.5 来转换
    • 如果是我们的样式,就按照 75 的 rootValue 来转换
  3. 通过查阅文档我们可以看到 rootValue 支持两种参数类型
    • 数字:固定值

    • 函数:动态计算返回

      • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
      • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
    • 修改配置如下

    /**
     * PostCSS 配置文件
     */module.exports = {
      // 配置要使用的 PostCSS 插件
      plugins: {
        // 配置使用 autoprefixer 插件
        // 作用:生成浏览器 CSS 样式规则前缀
        
        
        // VueCLI 内部已经配置了 autoprefixer 插件
        // 所以又配置了一次,所以产生冲突了
        
        
        // 'autoprefixer': { // autoprefixer 插件的配置
        //   // 配置要兼容到的环境信息
        //   browsers: ['Android >= 4.0', 'iOS >= 8']
        // },
    ​
        // 配置使用 postcss-pxtorem 插件
        // 作用:把 px 转为 rem
        'postcss-pxtorem': {
          rootValue ({ file }) {
            return file.indexOf('vant') !== -1 ? 37.5 : 75
          },
          propList: ['*']
        }
      }
    }
    ​
    
  4. 其他

    [Android]
    >= 4.0
    ​
    [iOS]
    >= 8
  5. 不用写代码的方式

    在 Photoshop 中打开单位与标尺设置面板:菜单栏 -> 编辑 -> 首选项 -> 单位与标尺。

    image-20200507235054962

    将单位中的标尺和文字的单位修改为

    打开设置图像大小面板:

    • 菜单栏 -> 图像 -> 图像大小
    • 快捷键:Alt + Ctrl + I

    image-20200507235701900

    • 关闭重新采样
    • 将宽度单位设置为
    • 将高度单位设置为
    • 将宽度修改为 375,高度不用动(它会适应宽度自动调整)

    点击确定完成修改。

    调整之后,我们可以看到图像的大小变成了 375 点 x 667 点(144 ppi)。

    在 iPhone 6/7/8 设备下,1个点 = 2个物理像素,所以你看到我们导出的图片还是原来的二倍图。

  6. 配置完毕,把服务重启一下,最后测试。