设计稿及尺寸单位

在 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

/config/index.js

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

目前 Taro 支持 750640828 三种尺寸设计稿,他们的换算规则如下:

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

建议使用 Taro 时,设计稿以 iPhone 6 750px 作为设计尺寸标准。

如果你的设计稿是 375 ,不在以上三种之中,那么你需要把 designWidth 配置为 375,同时在 DEVICE_RATIO 中添加换算规则如下:

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

API

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

  1. Taro.pxTransform(10) // 小程序:rpx,H5:rem

配置

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

参数默认值如下:

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

Type: Object | Null

onePxTransform (Boolean)

设置 1px 是否需要被转换

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 ,例如:

/config/index.js

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

CSS 编译时忽略(过滤)

忽略单个属性

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

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

忽略样式文件

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

忽略样式举例

样式文件里多行文本省略时我们一般如下面的代码:

  1. .textHide {
  2. display: -webkit-box;
  3. -webkit-box-orient: vertical;
  4. -webkit-line-clamp:2;
  5. text-overflow: ellipsis;
  6. overflow: hidden;
  7. }

但 Taro 编译后少了 -webkit-box-orient: vertical; 这条样式属性,此时我们需要忽略掉这条样式

忽略样式方法 1 加入 CSS 注释强制声明忽略下一行

  1. /* autoprefixer: ignore next */
  2. -webkit-box-orient: vertical;

忽略样式方法 2 加入 CSS 注释强制声明注释中间多行

  1. /* autoprefixer: off */
  2. -webkit-box-orient: vertical;
  3. /* autoprefixer: on */

忽略样式方法 3 写成行内样式

  1. <View
  2. style={{
  3. display: '-webkit-box',
  4. '-webkit-box-orient': 'vertical',
  5. '-webkit-line-clamp': 2,
  6. 'text-overflow': 'ellipsis',
  7. overflow: 'hidden',
  8. 'line-height': 2
  9. }}
  10. >
  11. 这是要省略的内容这是要省略的内容这是要省略的内容
  12. </View>

相关链接