uniapp 兼容pc与手机的样式方法

在开发uni-app应用时，经常需要应对多种设备和屏幕尺寸的兼容性问题，特别是在处理PC端和手机端时。要实现样式的兼容，可以采用以下几种方法：

### 1. 媒体查询（Media Queries）

通过CSS媒体查询，可以根据不同的屏幕尺寸应用不同的样式规则。这是响应式设计中常用的技术，可以让你的应用在手机、平板和PC上都能良好显示。

```css
/* 手机端样式 */
@media only screen and (max-width: 600px) {
    .container {
        padding: 10px;
    }
}

/* 平板端样式 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .container {
        padding: 20px;
    }
}

/* PC端样式 */
@media only screen and (min-width: 1025px) {
    .container {
        padding: 30px;
    }
}
```

### 2. 使用Flex布局

Flex布局能够使元素具有灵活的容器大小适应性，这对于制作响应式网页非常有用。通过设置合适的`flex`属性，可以让布局在不同屏幕尺寸下都表现良好。

```css
.container {
    display: flex;