这是一个小而美的现代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,清除浮动,重置标签预设样式,统一终端字体