页面布局

pt、px、rpx

pt

字体大小，保证的是视觉上的显示的字体大小

与px换算关系

1pt = 倍率 * 1px;

rpx

rpx是以iPhone6的宽度为750px为基准，保证的是在任意手机的宽度上展示的内容都一样多，一个手机的宽度是750rpx

�rpx = px * 750 / 设计稿宽度;

基础布局

两侧要为信息内容至少留出17pt的距离，以iPhone6（宽度750px，ratio 2）为例，左右边距为34px

image

字号

字体大小

image

注意：建议阅读文本使用17pt及以上，可点击文本按钮使用12pt及以上。

stylus code

Tips：使用rpx的话，按照pt值 * 2 即可得到rpx的值（）

// 标题
$fsize-h1 = 48rpx; // 应用于内容详情页标题
$fsize-h2 = 38rpx; // 应用于资讯类详情页正文
$fsize-h3 = 36rpx; // 应用于列表标题

// 正文
$fsize-content = 34rpx; // 应用于长文类详情页正文或详细介绍
$fsize-content-link = 32rpx; // 应用于常见文字链

// 辅助信息
$fsize-help-summary = 28rpx; // 应用于内容摘要，次级信息
$fsize-help-sup = 26rpx; // 应用于列表辅助文字、按钮内文字
$fsize-help-attach = 24rpx; // 应用于内容详情页附属信息

颜色

色值

1. 主要信息#000000，次要信息#333333，辅助信息使用#999999，附属信息使用#CCCCCC。

image

2. 蓝色用于文字链接或表达提醒和完成，红色用于警告和出错场景。

image

stylus code

$fcolor-title = #000; // 主要信息
$fcolor-sub = #333; // 次要信息
$fcolor-help = #999; // 辅助信息
$fcolor-addition = #ccc; // 附属信息
$fcolor-blue = #3c76ff; // 提醒/连接/弯完成
$fcolor-blue-gray = #3c76ffcc; // 提醒/连接/弯完成：按下、置灰
$fcolor-red = #f75347; // 警示/出错
$fcolor-red-gray = #f75347cc; // 警示/出错：按下置灰