Amaze UI

Base


Amaze UI 定义的基础样式与规则。

CSS 盒模型

Amaze UI 将所有元素的盒模型设置为 border-box,不会出现由于 paddingborder没有计算正确, 而使布局产生混乱。

 *,
 *:before,
 *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

参考链接:

字号及单位

Amaze UI 将浏览器的基准字号设置为 16px,也就是 16px=1rem。【2.7.2 及以前为 10px=1rem

body 上应用了 font-size: 1rem;,将页面字号设置为 16px

html {
  font-size: 16px;
}

body {
  font-size: 1rem; /* =16px */
}

em 根据上下文变化不同,rem 只跟基准设置关联,只要修改基准字号,所有使用 rem 作为单位的设置都会相应改变。

另外,一些需要根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px

参考资源:

色彩

主色 + 辅色 + 中性色:

  • 使用 #5085FF 作为主色,用于需要强调的字体,按钮等
  • 4个辅色用于信息提示和表示不同的状态,比如成功、警告和失败等
  • 5个中性色用于文本、背景、边框等,体现页面的层级结构
#5085FF
#9dbaff
#29BB9C
#EFA100
#E54D42
#000
#333
#666
#999
#e1e1e1
#f0f0f0