样式

Kico Style 的内置样式

容器

全局缩放:

html 元素添加 font-auto 类,即可让全局字体实现自动缩放。

PS:如果你的网站采用 px 单位设计,则该功能失效。
分辨率 效果
小于 500px 时(移动设备) 基础字体大小 14px
正常分辨率 基础字体大小 16px
大于 1930px 时(2K 屏幕) 基础字体大小 18px

尺寸限制:

添加 wrap 类,即可布置一个限制尺寸的框架。

<div class="wrap min">
    <p>我被限制了</p>
</div>

wrap 也提供了多种扩展类,可以使用不同宽度的同时,也可以清除边距。

类名 行为
wrap 保留 1em 的边距,宽度限制到 1200px
wrap min 保留 1em 的边距,宽度限制到 800px
wrap mid 保留 1em 的边距,宽度限制到 1000px
wrap max 保留 1em 的边距,宽度限制到 1400px
wrap full 保留 1em 的边距,不限制宽度

保留间距:

框架默认保留 1.25em 的左右间距,你也可以修改成细的(0.75em)、粗的(1.5em)或者清除掉。

PS:如果你的页面包含栅格系统,并使用了比容器更大的间距,则会出现页面溢出的现象。可以通过 CSS 的 overflow: hidden 方法清除间距。或者干脆使得页面间距和容器间距相同即可。
类名 行为
wrap thin 边距改为 0.75em
wrap thick 边距改为 1.5em
wrap clear 清除边距

清除浮动:

部分情况下使用 float 布局方案会导致父元素塌陷,给元素添加 .clearfix 类即可清除浮动,改善塌陷的问题。

此元素的浮动可以被清除掉

<div class="clearfix">
    <p style='float: left'>此元素的浮动可以被清除掉</p>
</div>