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;
    flex-direction: row;
    justify-content: space-around;
}
```

### 3. 利用uni-app的条件编译

uni-app支持条件编译，可以根据不同的平台编写特定的代码，包括样式代码。利用条件编译，可以为APP、H5、小程序等不同的平台编写特定的样式或逻辑。

```html
<style>
    /* 通用样式 */
    .container {
        padding: 20px;
    }
    /* App专有样式 */
    /* #ifdef APP-PLUS */
    .container {
        padding: 30px;
    }
    /* #endif */
    /* H5专有样式 */
    /* #ifdef H5 */
    .container {
        padding: 10px;
    }
    /* #endif */
</style>
```

### 4. 使用uni-app的API进行环境判断

uni-app提供了`uni.getSystemInfoSync()`API，可以获取当前运行环境的系统信息，包括操作系统、屏幕尺寸等。利用这些信息，你可以在应用的逻辑中动态调整样式。

```javascript
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android' || systemInfo.platform === 'ios') {
    // 手机端逻辑
} else {
    // PC端或其他逻辑
}
```

### 5. 使用Vue的计算属性动态应用样式

在Vue组件中，你可以利用计算属性根据条件动态生成样式对象，然后将这个对象绑定到元素的`:style`属性上。

```html
<template>
    <div :style="containerStyle">内容</div>
</template>

<script>
export default {
    computed: {
        containerStyle() {
            const isMobile = /* 判断是否为手机端的逻辑 */;
            return {
                padding: isMobile ? '10px' : '30px',
            };
        }
    }
}
</script>
```

通过上述方法，你可以根据需求选择适合的方式来实现uni-app应用在PC端和手机端的样式兼容性。在实际开发过程中，可能需要结合使用多种技术来达到最佳的兼容性和用户体验。