- Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度 100px,那么尺寸书写就是 100px,当转成微信小程序的时候,尺寸将默认转换为 100rpx,当转成 H5 时将默认转换为以 rem 为单位的值。所以建议使用px或者%。
- 如果我们不需要将尺寸进行转化,可以将px写成PX或者Px。此时class ignore在转化时将会被忽略。
.ignore {
border: 1Px solid; // ignored
border-width: 2PX; // ignored
}
- taro换算尺寸的标准是750px,如果我们需要修改默认尺寸,则需要将config/index.js中的尺寸进行修改。将config中的designWidth修改为我们想要的默认尺寸。
designWidth: 750,
- 换算规则如下,将DEVICE_RETIO中的内容修改,此时默认为750px,即iphone6的尺寸。
const DEVICE_RATIO = {
'640': 2.34 / 2,
'750': 1,
'828': 1.81 / 2,
'375': 2 / 1
}
- taro的尺寸转化API,小程序rpx,h5rem。
Taro.pxTransform(10)
- 配置的参考转换规则,PX或者Px不参与转化
{
onePxTransform: true, 1px是否发生转化,值为布尔类型
unitPrecision: 5, rem允许的小数位,值为number类型
propList: ['*'], 允许转化的属性,设置为*则代表任意['!font']
selectorBlackList: [],黑名单中的选择器将会被忽略
replace: true, 直接替换而不是追加一条进行覆盖,值为布尔类型
mediaQuery: false, 允许媒体查询中的px进行单位转化,值为布尔类型
minPixelValue: 0 设置一个可以被转化的最小值
}
- 对于头部包含注释 /postcss-pxtransform disable/ 的文件,插件不予处理。
- 忽略样式方法
1.加入css注释强制声明忽略下一行。
-webkit-box-orient: vertical;
1.加入css注释强制声明忽略下一行。
-webkit-box-orient: vertical;
2.加入css注释强制声明注释中间多行
-webkit-box-orient: vertical;
3.写成行内样式
<View
style={{
display: '-webkit-box',
'-webkit-box-orient': 'vertical',
'-webkit-line-clamp': 2,
'text-overflow': 'ellipsis',
overflow: 'hidden',
'line-height': 2
}}
>
这是要省略的内容这是要省略的内容这是要省略的内容
</View>