抖音小程序——样式ttss

在抖音小程序中使用的样式其实和c s s是一样的,和 CSS 相比,TTSS 扩展的特性有有尺寸单位和样式导入的方式不同。

外联样式表的相对路径1.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。

所以编写抖音小程序的时候,使用rpx单位就好。

2.样式导入

使用@import语句可以导入外联样式表,后面跟着外联样式表的相对路径,用;表示语句结束。

例如:

/** app.ttss **/
@import "common.ttss";
.middle-p {
  padding: 15px;
}

3.内联样式

例如:

<view style="color:{{color}};" />

注意,尽量不要使用这种写法,style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

推荐使用class的样式规则。

例如:

<view class="normal_view" />
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注