这是一个小而美的现代CSS样式重置优秀实践!
npm install u-reset.cssThis is a small and beautiful modern CSS style reset excellent practice!
!npm-version
!npm-download
!cnpm-download
!npm-installsize
!npm-minsize
!npm-license
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浏览器!