数据绑定
uni-app 样式基本是 CSS，用 rpx 单位（750rpx = 屏宽）做响应式。App 端和 H5 端略有差异，注意兼容。
rpx 单位
设计稿按 750px 宽，写多少就是多少 rpx，各端自动换算。也可以写 px（App 端 1px 可能是物理像素，注意）。
Flex 布局
display: flex 横排、justify-content 主轴对齐、align-items 交叉轴对齐，移动端布局主力。
全局样式
App.vue 的 style 是全局样式；uni.scss 放变量（主题色等）。
代码示例
<template>
<view class="card">
<image class="thumb" src="/static/logo.png" mode="aspectFill" />
<view class="info">
<text class="name">商品名称</text>
<text class="desc">一句话描述</text>
</view>
</view>
</template>
<style scoped>
.card {
display: flex;
align-items: center;
background: #fff;
border-radius: 16rpx;
padding: 20rpx;
margin: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}
.thumb {
width: 140rpx;
height: 140rpx;
border-radius: 12rpx;
margin-right: 20rpx;
}
.name {
font-size: 30rpx;
font-weight: 600;
}
.desc {
font-size: 24rpx;
color: #888;
margin-top: 8rpx;
}
</style>📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
color: #333; | 文字颜色 |
background: #fff; | 背景色 / 背景图 |
font-size: 16px; | 字号 |
font-family: Arial; | 字体 |
font-weight: bold; | 字重（加粗） |
margin: 10px; | 外边距（上右下左） |
padding: 10px; | 内边距 |
border: 1px solid #ccc; | 边框：粗细 样式 颜色 |
border-radius: 8px; | 圆角 |
width: 100%; | 宽度 |
height: 200px; | 高度 |
display: flex; | 弹性布局（现代布局主力） |
display: none; | 隐藏元素 |
position: relative / absolute / fixed; | 定位方式 |
top / left / right / bottom | 定位偏移 |
text-align: center; | 文字水平对齐 |
line-height: 1.6; | 行高 |
overflow: hidden; | 内容溢出处理 |
box-shadow: 0 2px 8px rgba(0,0,0,.1); | 阴影 |
transition: all .3s; | 过渡动画 |
cursor: pointer; | 鼠标手型 |
z-index: 10; | 层叠顺序 |
max-width: 1200px; margin: 0 auto; | 容器居中（经典写法） |
@media (max-width: 768px) {} | 响应式断点 |
:hover | 鼠标悬停状态 |