saduo-wap

💒saduo.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或者768即可，如下： **

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

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

}

//pc端 ...

使用说明

安装方式一

1.安装依赖包

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

2.引入样式

import "saduo/src/all.css";

安装方式二 cdn引入

<link rel="stylesheet" href="https://unpkg.com/saduo@0.0.1/dist/assets/css/index.css">
移动端
<link rel="stylesheet" href="https://unpkg.com/saduo-wap@0.0.1/dist/assets/css/index.css">

联系作者

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