uniapp创建css
在 uniapp 中创建 CSS 的方法
uniapp 支持多种 CSS 编写方式，包括内联样式、单文件组件样式和全局样式。以下是具体实现方法：
内联样式
在组件的模板中直接使用 style 属性：
<view style="color: red; font-size: 16px;">文本内容</view>单文件组件样式
在 .vue 文件的 <style> 标签中编写：
<style>
/* 普通 CSS */
.container {
padding: 20rpx;
background-color: #f5f5f5;
}
/* 支持 CSS 预处理器 */
<style lang="scss">
$primary-color: #1890ff;
.btn {
color: $primary-color;
}
</style>全局样式
在 App.vue 中定义的样式会全局生效：
<style>
/* 全局样式 */
page {
background-color: #f8f8f8;
}
</style>使用 CSS 预处理器
uniapp 支持 less/sass/scss/stylus 等预处理器，需安装对应依赖：
npm install sass sass-loader -D样式导入
通过 @import 引入外部样式文件：
@import url('../../common/global.css');条件编译
针对不同平台编写特定样式：
/* #ifdef H5 */
.h5-specific {
display: block;
}
/* #endif */注意事项
- 推荐使用 rpx 作为单位实现响应式布局
- 避免使用过于复杂的选择器
- 组件样式默认有 scoped 特性，避免全局污染
- 小程序平台对 CSS 支持有限制，需注意兼容性
通过以上方法可以灵活地在 uniapp 项目中管理和组织 CSS 代码。
