Taro设计稿及尺寸单位taro中建议用px,百分比%为单位,Taro 默认会对所有单位进行转换。当转成微信小程序的时候

单位

taro中建议用px,百分比%为单位,Taro 默认会对所有单位进行转换。当转成微信小程序的时候，尺寸将默认转换为 rpx为单位的值，当转成 H5 时将默认转换为以rem为单位的值。

转化

当设计稿为750时,需要在config.js中设置设计稿尺寸,并且设置当为750设计稿时转化的规则:

const config = {
  projectName: 'First-Taro',
  date: '2021-2-22',
  designWidth: 750, 
  deviceRatio: {
    640: 2.34 / 2,
    750: 0.5,  当为750时 1px转化成2rpx
    828: 1.81 / 2
  },
  }

行内样式转化规则无效

当遇到行内样式时,px并不能转化为rpx,这时使用Taro.pxTransform()方法即可转化

      <View className='index' style={{height:Taro.pxTransform(40)}}>
        <Text  className='text'>Hello world!</Text>
      </View>

配置项

taro-docs.jd.com/taro/docs/s…

CSS 编译时忽略

忽略px转化

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

忽略样式文件

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

忽略样式举例

多文本隐藏一般用这个样式:

.textHide {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  text-overflow: ellipsis;
  overflow: hidden;
}

但是经过taro编译后少了-webkit-box-orient: vertical这条,所以我们编译的时候需要忽略该条样式,在这条前加一行忽略注释即可:

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