开始使用 布局容器和栅格系统 文字样式 背景颜色 按钮 标签、角标、红点 图标 单选、多选、开关 进度条 顶部导航 底部工具栏 底部工具栏扩展 表单 列表 卡片列表 宫格布局 弹性布局 时间轴 聊天气泡 信息条 提示条 仿微信首页 仿微信朋友圈 仿今日头条 仿知乎首页 仿淘宝首页 会员中心首页一 会员中心首页二 订单列表首页 弹窗 Dialog 弹窗 Toast 弹出菜单 底部弹出框 底部分享盒子 下拉刷新 轮播组件 滚动监听 按钮组工具栏 搜索条 滑块 Tab切换栏 折叠面板 图片懒加载 自定义主题样式 列表左滑删除

文字样式

文字大小

rem 的基础像素为 20px,也就是说在不改变 html 根标签的 font-size 之前 1rem = 20px

提示

作者做了屏幕适配:

屏幕宽度超过 400px1rem = 21.33333333px
屏幕宽度超过 414px1rem = 21px
屏幕宽度超过 480px1rem = 25.6px

页面默认文字大小为 0.8rem 也就是 16px

H1 ~ H6文字的 font-weight400

H1 文字大小为 1.2rem

H2 文字大小为 1rem

H3 文字大小为 0.8rem

H4 文字大小为 0.7rem

H5、H6、P 文字大小为 0.7rem,文字颜色为 #757575

提示

H1~H6 均有 small 样式:
h1~h6 small 的字体不加粗 line-heihgt: 1,文字颜色为 #757575
h1~h3 small 的字体大小为原字体大小的 65%
h4~h6 small 的字体大小为原字体大小的 75%
示例代码:<h1><small>小号标题</small></h1>

针对文字做了几个固定的大小供大家来选择,.aui-font-size-*;

具体有以下几款:

.aui-font-size-12 {font-size: 0.6rem;}
.aui-font-size-14 {font-size: 0.7rem;}
.aui-font-size-16 {font-size: 0.8rem;}
.aui-font-size-18 {font-size: 0.9rem;}
.aui-font-size-20 {font-size: 1rem;}

文字颜色

针对文字做了几个固定的色值供大家来选择,.aui-text-*;

具体有以下几款:

.aui-text-default {color: #212121;}
.aui-text-white {color: #ffffff;}
.aui-text-primary {color: #00bcd4;}
.aui-text-success {color: #009688;}
.aui-text-info {color: #03a9f4;}
.aui-text-warning {color: #ffc107;}
.aui-text-danger {color: #e51c23;}
.aui-text-pink {color: #e91e63;}
.aui-text-purple {color: #673ab7;}
.aui-text-indigo {color: #3f51b5;}

示例源码

<section class="aui-content-padded">
    <h1>标题一 H1 1.2rem</h1>
    <h2>标题二 H2 1rem</h2>
    <h3>标题三 H3 0.8rem</h3>
    <h4>标题四 H4 0.7rem</h4>
    <h5>标题五 H5 0.7rem #757575</h5>
    <h6>标题六 H6 0.7rem #757575</h6>
    <p>P标签字体,默认为0.7rem,文字颜色#757575</p>
    <div class="aui-content">
        内容区域,AUI 2.0色彩及尺寸按照Material Design标准设计
    </div>
</section>
<section class="aui-content">
    <ul class="aui-list">
        <li class="aui-list-header">
            文字颜色值对应
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-default">default</div>
                <div class="aui-list-item-right">#212121</div>
            </div>
        </li>
        <li class="aui-list-item" style="background-color: #CCC;">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-white">white</div>
                <div class="aui-list-item-right">#ffffff</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-primary">primary</div>
                <div class="aui-list-item-right">#00bcd4</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-success">success</div>
                <div class="aui-list-item-right">#009688</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-info">info</div>
                <div class="aui-list-item-right">#03a9f4</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-warning">warning</div>
                <div class="aui-list-item-right">#ffc107</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-danger">danger</div>
                <div class="aui-list-item-right">#e51c23</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-pink">pink</div>
                <div class="aui-list-item-right">#e91e63</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-purple">purple</div>
                <div class="aui-list-item-right">#673ab7</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title aui-text-indigo">indigo</div>
                <div class="aui-list-item-right">#3f51b5</div>
            </div>
        </li>
    </ul>
</section>