重置样式库

u-reset.css

This is a reset style library.

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(\\)。

目前添加的适配尺寸为： 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. 重置浏览器默认样式
  2. 基于CSS的REM布局
  3. 统一终端中文/英文字体
  4. 文本的溢出显示省略号
  5. 清除浮动

浏览器支持

ChromeFirefoxSafariOperaEdgeIE
Latest √ Latest √ Latest √ Latest √ Latest √ 8+ √
posted @ 2020-10-29 15:16  Jane先森  阅读(117)  评论(0)  编辑  收藏  举报