1.0.0 • Published 5 years ago

@ufs/reset v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

@ufs/reset

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

This is a reset style library.

npm version npm downloads Dependency Status

Install

npm install @ufs/reset

Download

https://unpkg.com/@ufs/reset

Example

//module
require("@ufs/reset");
@import "@ufs/reset";

//CDN
<link rel="stylesheet" href="https://unpkg.com/@ufs/reset">

REM布局

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

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

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

注意：需在html标签添加属性rem(\\)。

目前添加的适配尺寸为： 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

ChromeFirefoxSafariOperaEdgeIE
Latest √Latest √Latest √Latest √Latest √8+ √
resetcssreset-cssreset.cssremrem布局重置样式
@infinitebrahmanuniverse/nolb-_uf@zalastax/nolb-_uf
1.0.0

5 years ago