u-reset.css

> 这是一个小而美的现代CSS样式重置优秀实践！

This is a small and beautiful modern CSS style reset excellent practice!

!npm-version
!npm-download
!cnpm-download
!npm-installsize
!npm-minsize
!npm-license

特性

1. 统一终端(windows,mac,linux)中文/英文字体
2. 统一相关标签预设样式
3. 支持REM布局，且支持自定义设计稿尺寸
4. 支持单行、多行文本的溢出显示省略号
5. 支持网站灰度模式、色弱模式
6. 支持清除浮动

安装导入

``
npm install u-reset.css
`
构建工具导入模块：
`
// es module
import "u-reset.css";
`
> 提示：默认导入压缩u-reset.min.css文件，大小仅为1KB。

下载引入

点击下载：https://unpkg.com/u-reset.css

`

`

浏览器CDN引入
`
// CDN

`


功能使用

$3

支持REM布局，默认适配750px、1080px设计稿，且支持自定义设计稿尺寸。

使用流程：
1. 引入 u-reset.css
2. 在添加 rem 属性
3. 将设计稿尺寸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
`

`
> 提示：默认适配设计稿尺寸为：移动端 750px、PC端 1080px

#### 自定义适配尺寸

示例：自定义适配尺寸，如设计稿 1440px，则在html标签添加如下代码：
`
*.html


`
> 提示：--design-width 为自定义CSS变量，通过该变量自定义设计稿尺寸。

$3

- 添加class="hidden1" 1行溢出出现省略号
- 添加class="hidden2" 2行溢出出现省略号
- ...
- 添加class="hidden5" 5行溢出出现省略号

示例：
`


...

`

$3

在待清除浮动元素添加clearfix 类名即可。

示例：
`



`

$3

> 支持 属性 与 class 两种方式

给html 添加 gray-model 属性
`

`
或者，给html 添加 gray-model 类名
`

`


$3

> 支持 属性 与 class 两种方式

给html 添加 color-weak-model 属性
`

`
或者，给html 添加 color-weak-model 类名
`

``

浏览器支持

!Chrome | !Firefox | !Safari | !Opera | !Edge | !IE |
--- | --- | --- | --- | --- | --- |
Latest √ | Latest √ | Latest √ | Latest √ | Latest √| × |

> 提示：不支持IE浏览器！

版本历史

- V2.0.0 去除IE兼容，新增灰度、色弱模式，REM支持自定义尺寸，清除浮动，重置标签预设样式，统一终端字体
- V1.0.0 兼容IE，REM，清除浮动，重置标签预设样式，统一终端字体