样式兼容性问题

uni-app作为一款跨平台开发框架，虽然能够实现一套代码多端运行，但在实际开发中仍然会遇到样式兼容性问题。不同平台对CSS的支持程度、默认样式和渲染机制存在差异，这些因素可能导致页面在不同端上显示效果不一致。

平台差异导致的样式问题

不同平台对CSS属性的支持程度不同。例如，在微信小程序中，position: fixed的定位基准是视口，而在H5中可能受到父级元素transform属性的影响。再比如，iOS和Android对flex布局的细节处理也存在差异：

.container {
  display: flex;
  /* 在Android上可能需要添加 */
  flex-direction: row;
  /* 在iOS上可能需要明确指定 */
  align-items: flex-start;
}

平台特有的样式问题也很常见。微信小程序的button组件默认带有边框和背景色，而H5的button则采用浏览器默认样式：

/* 需要重置小程序button样式 */
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  &::after {
    display: none;
  }
}

单位适配问题

uni-app推荐使用rpx作为响应式单位，但在某些情况下会出现问题。例如，在PC端浏览器中，过大的rpx值可能导致布局异常：

/* 在H5端可能显示过大 */
.font {
  font-size: 100rpx;
}

/* 解决方案：使用条件编译 */
/* #ifdef H5 */
.font {
  font-size: 50px;
}
/* #endif */

对于需要精确控制的情况，可以考虑混合使用单位：

.box {
  width: 100%; /* 基础宽度 */
  max-width: 750rpx; /* 在小程序端限制最大宽度 */
  margin: 0 auto; /* 在H5端居中 */
}

伪元素和阴影差异

各平台对CSS新特性的支持程度不一。例如，微信小程序不支持::before和::after伪元素，而H5端则完全支持：

/* 条件编译处理伪元素 */
/* #ifdef H5 */
.icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
}
/* #endif */

盒阴影的表现也有差异，特别是在Android端可能出现渲染模糊：

.card {
  /* 通用写法 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* Android端可能需要调整 */
  /* #ifdef APP-PLUS */
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  /* #endif */
}

字体和图标问题

字体文件的引入在不同平台表现不同。小程序需要使用base64内嵌字体，而H5可以直接使用@font-face：

/* #ifdef MP-WEIXIN */
@font-face {
  font-family: 'CustomFont';
  src: url('data:application/font-woff;base64,...') format('woff');
}
/* #endif */

/* #ifdef H5 */
@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/custom.woff') format('woff');
}
/* #endif */

图标方案的选择也很关键。uni-app的<uni-icons>组件在不同平台可能表现不一致，自定义图标时需要注意：

<template>
  <view>
    <!-- 小程序端使用iconfont -->
    <!-- #ifdef MP-WEIXIN -->
    <text class="iconfont icon-home"></text>
    <!-- #endif -->
    
    <!-- H5端使用SVG -->
    <!-- #ifdef H5 -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-home"></use>
    </svg>
    <!-- #endif -->
  </view>
</template>

深度选择器问题

在自定义组件中修改子组件样式时，各平台对深度选择器的支持不同：

/* 通用写法 */
::v-deep .child-component {
  color: red;
}

/* 微信小程序专用 */
/* #ifdef MP-WEIXIN */
>>> .child-component {
  color: red;
}
/* #endif */

/* H5专用 */
/* #ifdef H5 */
/deep/ .child-component {
  color: red;
}
/* #endif */

动画兼容性处理

CSS动画在各平台的性能和支持度差异较大。简单的动画可以使用transform和transition，复杂动画可能需要平台特定的实现：

/* 基础动画 */
.move {
  transition: transform 0.3s ease;
}
.move.active {
  transform: translateX(100px);
}

/* 小程序端可能需要使用animation */
/* #ifdef MP-WEIXIN */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.move.active {
  animation: slide 0.3s forwards;
}
/* #endif */

对于性能要求高的动画，可以考虑使用各平台的原生动画API：

// uni-app动画API示例
const animation = uni.createAnimation({
  duration: 300,
  timingFunction: 'ease'
})
animation.translateX(100).step()
this.animationData = animation.export()

响应式布局的陷阱

虽然Flex布局在大多数情况下工作良好，但在某些旧版本Android上可能出现问题。建议添加备用方案：

.container {
  display: flex;
  /* 备用方案 */
  display: -webkit-box;
  display: -webkit-flex;
}

.item {
  flex: 1;
  /* 备用方案 */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
}

媒体查询在不同平台的表现也不一致，特别是在处理设备像素比时：

/* 通用媒体查询 */
@media (min-width: 768px) {
  .container {
    width: 750rpx;
  }
}

/* 针对高DPI设备的调整 */
/* #ifdef H5 */
@media (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border-width: 0.5px;
  }
}
/* #endif */

第三方组件库的样式覆盖

使用第三方组件库时，样式覆盖可能会遇到特异性问题。建议使用自定义主题文件而不是直接覆盖：

// custom-theme.scss
$primary-color: #1890ff; // 修改主题色

// 在vue.config.js中配置
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/styles/custom-theme.scss";`
      }
    }
  }
}

如果必须覆盖组件样式，应该提高选择器特异性：

/* 不好的做法 */
.uni-btn {
  color: red;
}

/* 更好的做法 */
.page-container .custom-btn.uni-btn {
  color: red !important;
}

平台特有样式的条件编译

uni-app的条件编译是解决样式兼容性的有力工具。除了常见的#ifdef，还可以使用#ifndef：

/* 仅在小程序端生效 */
/* #ifdef MP-WEIXIN || MP-ALIPAY */
.page {
  padding-bottom: 100rpx;
}
/* #endif */

/* 在非H5端生效 */
/* #ifndef H5 */
.nav-bar {
  height: 88rpx;
}
/* #endif */

对于复杂的样式差异，可以创建单独的平台样式文件：

styles/
├── app.scss       # 通用样式
├── h5.scss       # H5专用样式
├── mp.scss       # 小程序专用样式
└── app-plus.scss # App专用样式

然后在主样式文件中引入：

@import 'app';

/* #ifdef H5 */
@import 'h5';
/* #endif */

/* #ifdef MP-WEIXIN */
@import 'mp';
/* #endif */

实际案例：导航栏适配

不同平台的导航栏实现差异很大，需要特殊处理。以下是一个综合解决方案：

<template>
  <view>
    <!-- 状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-bar">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template>

<style>
/* 状态栏高度适配 */
.status-bar {
  height: var(--status-bar-height);
}

/* 导航栏基础样式 */
.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 小程序端导航栏调整 */
/* #ifdef MP-WEIXIN */
.status-bar {
  height: 0;
}
.nav-bar {
  padding-top: env(safe-area-inset-top);
}
/* #endif */

/* iOS端适配 */
/* #ifdef IOS */
.nav-bar {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
/* #endif */
</style>

CSS变量在跨平台中的应用

CSS变量可以很好地解决一些样式差异问题，但需要注意浏览器兼容性：

:root {
  --primary-color: #007aff;
  /* 平台特定变量 */
  /* #ifdef MP-WEIXIN */
  --button-height: 40px;
  /* #endif */
  /* #ifdef H5 */
  --button-height: 36px;
  /* #endif */
}

.button {
  background-color: var(--primary-color);
  height: var(--button-height);
}

对于不支持CSS变量的平台，需要提供回退方案：

.button {
  /* 回退值 */
  height: 36px;
  height: var(--button-height, 36px);
}

图片和背景图的处理

各平台对背景图的处理方式不同。小程序中可能需要将图片转为base64或使用网络地址：

.bg-image {
  /* 通用写法 */
  background-image: url('/static/bg.png');
  
  /* 小程序端可能需要绝对路径 */
  /* #ifdef MP-WEIXIN */
  background-image: url('https://example.com/static/bg.png');
  /* #endif */
}

对于响应式图片，可以使用<picture>元素配合条件编译：

<template>
  <!-- H5端使用picture -->
  <!-- #ifdef H5 -->
  <picture>
    <source srcset="/static/bg-large.png" media="(min-width: 768px)">
    <img src="/static/bg-mobile.png" alt="">
  </picture>
  <!-- #endif -->
  
  <!-- 小程序端使用image -->
  <!-- #ifdef MP-WEIXIN -->
  <image :src="imageSrc" mode="aspectFill"></image>
  <!-- #endif -->
</template>

<script>
export default {
  computed: {
    imageSrc() {
      // 根据屏幕宽度返回不同图片
      const width = uni.getSystemInfoSync().screenWidth
      return width >= 768 ? '/static/bg-large.png' : '/static/bg-mobile.png'
    }
  }
}
</script>

表单元素的平台差异

表单控件在各平台的默认样式差异很大，需要统一重置：

/* 输入框重置 */
input, textarea {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
}

/* 小程序端特殊处理 */
/* #ifdef MP-WEIXIN */
input, textarea {
  padding-left: 5px;
  padding-right: 5px;
}
/* #endif */

/* 单选和复选框 */
checkbox, radio {
  transform: scale(0.9);
}

/* H5端复选框样式 */
/* #ifdef H5 */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
/* #endif */

滚动行为的兼容处理

各平台的滚动容器实现不同，需要特别注意：

/* 通用滚动容器 */
.scroll-view {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 小程序端需要使用scroll-view组件 */
/* #ifdef MP-WEIXIN */
.scroll-view {
  height: 100%;
}
/* #endif */

/* App端可能需要特殊处理 */
/* #ifdef APP-PLUS */
.scroll-view {
  flex: 1;
}
/* #endif */

对于滚动吸顶效果，各平台实现方式也不同：

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  
  /* 小程序端替代方案 */
  /* #ifdef MP-WEIXIN */
  position: relative;
  /* #endif */
}

/* 小程序端使用scroll-view的sticky属性 */
/* #ifdef MP-WEIXIN */
<scroll-view scroll-y :sticky="true">
  <view slot="sticky" class="sticky-header"></view>
</scroll-view>
/* #endif */

多主题支持的实现

实现多主题时，需要考虑各平台对CSS变量的支持：

// 在Vue中动态设置主题
methods: {
  setTheme(theme) {
    const root = document.documentElement
    if (theme === 'dark') {
      root.style.setProperty('--bg-color', '#222')
      root.style.setProperty('--text-color', '#fff')
    } else {
      root.style.setProperty('--bg-color', '#fff')
      root.style.setProperty('--text-color', '#333')
    }
    
    // 小程序端需要通过setData更新
    /* #ifdef MP-WEIXIN */
    this.setData({
      themeClass: theme
    })
    /* #endif */
  }
}

对应样式：

/* 通用主题样式 */
.page {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* 小程序端主题类 */
/* #ifdef MP-WEIXIN */
.page.dark {
  background-color: #222;
  color: #fff;
}
.page.light {
  background-color: #fff;
  color: #333;
}
/* #endif */