vusui-cssopen in new window 免除开发者繁复的手写 CSS 样式，让 WEB 前端开发更简单、灵活、便捷！如果喜欢就点个 ★Staropen in new window 吧。
- 移动设备优先： vusui-css 包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持： 所有的主流浏览器都支持。
- 容易上手： 只要具备 CSS 的基础知识，就可以开始使用。
- 响应式设计： vusui-css 的响应式能够自适应于手机、平板、电脑等设备。
- 支持 uni-app： vusui-css 同时还支持 uni-app 应用
浏览器直接引入
直接通过浏览器的 HTML 标签导入 vusui-css，然后就可以使用 vusui-css 了。
根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkgopen in new window 和 jsDelivropen in new window 举例。
#unpkg
<head><!-- 引入全部样式 --><link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/style.css" /><!-- 引入移动端样式 --><link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/mobile.css" /><!-- 引入精简版样式 --><link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/lite.css" /><!-- 引入指定样式 --><link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/flex.css" />...
</head>
#jsDelivr
<head><!-- 引入全部样式 --><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@vusui/css/lib/style.css" /><!-- 引入移动端样式 --><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@vusui/css/lib/mobile.css" /><!-- 引入精简版样式 --><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@vusui/css/lib/lite.css" /><!-- 引入指定样式 --><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@vusui/css/lib/flex.css" />...
</head>本节将介绍如何在项目中引入 vusui-css。
#样式目录
每一个 CSS 文件都可以单独引入。
┌─ vusui-css
│ ├─ style.css * 全部样式
│ ├─ mobile.css * 移动端样式(无响应式)
│ ├─ lite.css * 精简版样式(删减部分样式)
│ ├─ animation.css * 动画样式
│ ├─ border.css * 边框样式
│ ├─ color.css * 颜色样式
│ ├─ flex.css * flex盒子样式
│ ├─ fontsize.css * 字体大小样式
│ ├─ height.css * 高度样式
│ ├─ image.css * 图片、背景图片样式
│ ├─ layout.css * 布局样式
│ ├─ margin.css * margin外补填充样式
│ ├─ opacity.css * 透明度样式
│ ├─ padding.css * padding内补填充样式
│ ├─ position.css * position位置、定位样式
│ ├─ radius.css * 圆角半径样式
│ ├─ reboot.css * 样式重置
│ ├─ rotate.css * 旋转样式
│ ├─ shadow.css * 阴影样式
│ ├─ typography.css * 文本排版样式
│ └─ width.css * 宽度样式
#全局引入
// main.ts
import { createApp } from 'vue';// 引入你需要的版本// 全部样式
import '@vusui/css/lib/style.css';// 移动端专用样式(无响应式)
import '@vusui/css/lib/mobile.css';// 精简版样式
import '@vusui/css/lib/lite.css';// 指定样式
import '@vusui/css/lib/margin.css';
import '@vusui/css/lib/width.css';
// ...const app = createApp({});
app.mount('#app');
#局部引入
<script>
// 指定样式
import '@vusui/css/lib/color.css';export default {};
</script>
#HTML 中使用
<template><div class="vus-bg--success">背景颜色</div><div class="vus-color--success">文本颜色</div><div class="vus-border--success">边框颜色</div>
</template>
