- 轻量
- 实用
- 小巧 因为轻,所以值得拥有,很好的一个原子类css样式库。
- 重置和基本样式
@import './reset.css';
@import './base.css';
- 响应式
@import './screen.css';
- 位置
@import './row.css';
@import './col.css';
@import './position.css';
- 间距
@import './margin.css';
@import './padding.css';
@import './top.css';
- 高度&高度
@import './width.css';
@import './height.css';
@import './line-height.css';
- 列表&文本
@import './list.css';
@import './text.css';
@import './font.css';
- 阴影
@import './shadow.css';
- 透明度
@import './opacity.css';
- 滤镜
@import './filters.css';
- 颜色
@import './color.css';
断点设置,768px,1024px,1280px,1536px,1920px。
- 手机
@media (max-width: 768px){}
- phone to ipad
@media (min-width: 768px){}
- ipad
@media (min-width:1024px){
}
- pc笔记本 old
@media (min-width:1280px) {}
- pc笔记本 new 1920px
@media (min-width:1536px) {}
- 超大屏 4k
@media (min-width:1920px) {}
**注意:正常情况下,只区分wap和pc,只需写一份断点1024即可,如下: **
//兼容移动端
@media (max-width:1024px){
}
1.安装依赖包
npm i saduocss --save
2.引入样式
import "saduocss/src/all.css";
<link rel="stylesheet" href="https://unpkg.com/saduocss@1.2.0/dist/assets/css/index.css">
或者
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/saduocss@1.2.0/dist/assets/css/index.css">