u-reset.css

This is a reset style library.

Usage no npm install needed!

<script type="module">
  import uResetCss from 'https://cdn.skypack.dev/u-reset.css';
</script>

README

u-reset.css

这是一个简洁的重置样式库。

This is a reset style library.

npm-version npm-download npm-installsize npm-minsize npm-devdependencies npm-dependencies npm-license

Install

npm install u-reset.css

Download

https://unpkg.com/u-reset.css

Example

//module
require("u-reset.css");
import "u-reset.css";

//CDN
<link rel="stylesheet" href="https://unpkg.com/u-reset.css">

REM布局

引入u-reset.css就可以进行REM布局。

如果设计稿测量的宽度为 100px => 1rem。

design 100px  ->  css 1rem
design 150px  ->  css 1.5rem
design 284px  ->  css 2.84rem

注意：需在html标签添加属性rem(<html rem="750"></html>)。

目前添加的适配尺寸为： 750px、1080px

示例

***.html
<html rem="750">
</html>

***.css
.container{
    width:1rem;
    height:1.54rem;
}
.col{
    width:0.36rem;
    height:0.52rem;
}

文本的溢出显示省略号

  • 添加class="hidden1" 1行溢出出现省略号
  • 添加class="hidden2" 2行溢出出现省略号
  • ...
  • 添加class="hidden5" 5行溢出出现省略号
<div class="hidden1"></div>
<div class="hidden2"></div>
...
<div class="hidden5"></div>

清除浮动

<div class="clearfix"></div>

特性

  1. 基于CSS的REM布局
  2. 统一终端中文/英文字体
  3. 文本的溢出显示省略号
  4. 清除浮动

Browser support

Chrome Firefox Safari Opera Edge IE
Latest √ Latest √ Latest √ Latest √ Latest √ 8+ √