💒saduocss原子类css仓库

🌈特点介绍

• 轻量
• 实用
• 小巧 因为轻，所以值得拥有，很好的一个原子类css样式库。

⛱️软件架构

• 重置和基本样式

@import './reset.css';
@import './scrollbar.css';
@import './var.css';

• 响应式

@import './screen.css';
@import './base.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，1536px，1536px，1920px。

• 小屏幕手机

@media (max-width: 768px){}

• 大屏幕手机/小平板

@media (min-width: 769px) and (max-width: 1024px) {}

• 平板

@media (min-width: 1025px) and (max-width: 1280px) {}

• 桌面

@media (min-width: 1281px) and (max-width: 1536px) {}

• 大桌面

@media (min-width: 1537px){}

**注意：正常情况下，只区分wap和pc，只需写一份断点1024即可，如下： **

//兼容移动端
@media (max-width:1024px){

}

//pc端 ...

使用说明

安装方式一

1.安装依赖包

npm i saduocss --save
npm i saduocss-rem --save (适配移动端rem,可选。小于1024px的元素，会自动转换成rem单位)

2.引入样式

import "saduocss/src/all.css";

cdn引入

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/css/index.css">
或者
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/assets/css/index.css">
rem适配
<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/rem.css">
或者
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/rem.css">

安装方式二

1.下载文件

联系作者

微信:yanyutao2014
主页：https://gitee.com/yanyutao0402/saduocss