Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
这是一个小而美的现代CSS样式重置优秀实践！
This is a small and beautiful modern CSS style reset excellent practice!
- 统一终端(windows,mac,linux)中文/英文字体
- 统一相关标签预设样式
- 支持REM布局，且支持自定义设计稿尺寸
- 支持单行、多行文本的溢出显示省略号
- 支持网站灰度模式、色弱模式
- 支持清除浮动
npm install u-reset.css
构建工具导入模块：
// es module import "u-reset.css";
提示：默认导入压缩u-reset.min.css文件，大小仅为1KB。
点击下载：https://unpkg.com/u-reset.css
<link rel="stylesheet" href="path/u-reset.min.css">
浏览器CDN引入
// CDN <link rel="stylesheet" href="https://unpkg.com/u-reset.css">
支持REM布局，默认适配750px、1080px设计稿，且支持自定义设计稿尺寸。
使用流程：
- 引入 u-reset.css
- 在<html>添加 rem 属性
- 将设计稿尺寸px转换CSS rem单位(比例：design 100px : css 1rem)
design 100px -> css 1rem
如：
design 100px -> css 1rem design 150px -> css 1.5rem design 284px -> css 2.84rem
使用需在html标签添加属性rem
<html rem></html>
提示：默认适配设计稿尺寸为：移动端 750px、PC端 1080px
示例：自定义适配尺寸，如设计稿 1440px，则在html标签添加如下代码：
***.html <html rem style="--design-width: 1440px"> </html>
提示：--design-width 为自定义CSS变量，通过该变量自定义设计稿尺寸。
- 添加class="hidden1" 1行溢出出现省略号
- 添加class="hidden2" 2行溢出出现省略号
- ...
- 添加class="hidden5" 5行溢出出现省略号
示例：
<div class="hidden1"></div> <div class="hidden2"></div> ... <div class="hidden5"></div>
在待清除浮动元素添加clearfix 类名即可。
示例：
<div class="clearfix"></div>
支持 属性 与 class 两种方式
给html 添加 gray-model 属性
<html gray-model>
或者，给html 添加 gray-model 类名
<html class="gray-model">
支持 属性 与 class 两种方式
给html 添加 color-weak-model 属性
<html color-weak-model>
或者，给html 添加 color-weak-model 类名
<html class="color-weak-model">
| Latest √ | Latest √ | Latest √ | Latest √ | Latest √ | × |
提示：不支持IE浏览器！
- V2.0.0 去除IE兼容，新增灰度、色弱模式，REM支持自定义尺寸，清除浮动，重置标签预设样式，统一终端字体
- V1.0.0 兼容IE，REM，清除浮动，重置标签预设样式，统一终端字体