设计稿及尺寸单位

在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成H5时将默认转换为以 rem 为单位的值。

如果你希望部分 px 单位不被转换成 rpx 或者 rem ，最简单的做法就是在px单位中增加一个大写字母，例如 Px 或者 PX 这样，则会被转换插件忽略。

结合过往的开发经验，Taro 默认以 750px 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置，例如设计稿尺寸是 640px，则需要修改项目配置 config/index.js 中的 designWidth 配置为 640：

  1. const config = {
  2.   projectName: 'myProject',
  3.   date: '2018-4-18',
  4.   designWidth: 640,
  5.   ....
  6. }

目前 Taro 支持 750、 640 、 828 三种尺寸设计稿，他们的换算规则如下：

  1. const DEVICE_RATIO = {
  2.   '640': 2.34 / 2,
  3.   '750': 1,
  4.   '828': 1.81 / 2
  5. }

建议使用 Taro 时，设计稿以 iPhone6 750px 作为设计尺寸标准。

API

在编译时，Taro 会帮你对样式做尺寸转换操作，但是如果是在 JS 中书写了行内样式，那么编译时就无法做替换了，针对这种情况，Taro 提供了 API Taro.pxTransform 来做运行时的尺寸转换。

  1. Taro.pxTransform(10) // 小程序：rpx，H5：rem

配置

默认配置会对所有的 px 单位进行转换，有大写字母的 Px 或 PX 则会被忽略。

参数默认值如下：

  1. {
  2.     unitPrecision: 5,
  3.     propList: ['*'],
  4.     selectorBlackList: [],
  5.     replace: true,
  6.     mediaQuery: false,
  7.     minPixelValue: 0
  8. }

Type: Object | Null

unitPrecision (Number)

REM单位允许的小数位。

propList (Array)

允许转换的属性。

  • Values need to be exact matches.
  • Use wildcard * to enable all properties. Example: ['*']
  • Use * at the start or end of a word. (['*position*'] will match background-position-y)
  • Use ! to not match a property. Example: ['*', '!letter-spacing']
  • Combine the “not” prefix with the other prefixes. Example: ['*', '!font*']

selectorBlackList

黑名单里的选择器将会被忽略。

  • If value is string, it checks to see if selector contains the string.
    • ['body'] will match .body-class
  • If value is regexp, it checks to see if the selector matches the regexp.
    • [/^body$/] will match body but not .body

replace (Boolean)

直接替换而不是追加一条进行覆盖。

mediaQuery (Boolean)

允许媒体查询里的px单位转换

minPixelValue (Number)

设置一个可被转换的最小px值

配置规则对应到 config/index.js ，例如：

  1. {
  2.   h5: {
  3.     publicPath: '/',
  4.     staticDirectory: 'static',
  5.     module: {
  6.       postcss: {
  7.         autoprefixer: {
  8.           enable: true
  9.         },
  10.         pxtransform: {
  11.           selectorBlackList: ['body']
  12.         }
  13.       }
  14.     }
  15.   },
  16.   weapp: {
  17.     // ...
  18.     module: {
  19.       postcss: {
  20.         pxtransform: {
  21.           selectorBlackList: ['body']
  22.         }
  23.       }
  24.     }
  25.   }
  26. }

忽略

属性

当前忽略单个属性的最简单的方法，就是 px 单位使用大写字母。

  1.  /*`px` is converted to `rem`*/
  2. .convert {
  3.     font-size: 16px; // converted to 1rem
  4. }
  6.  /* `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers*/
  7. .ignore {
  8.     border: 1Px solid; // ignored
  9.     border-width: 2PX; // ignored
  10. }

文件

对于头部包含注释/*postcss-pxtransform disable*/ 的文件，插件不予处理。