# H5 Platform | H5 平台

## Instructions

This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.

### Key Concepts

- H5 responsive design
- Browser compatibility
- Performance optimization
- CSS and SCSS support

### Example: H5 Responsive Components

```vue
<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <u-grid :col="gridCol">
      <u-grid-item v-for="item in gridData" :key="item.id">
        {{ item.name }}
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const gridCol = ref(3)
const gridData = ref([])

onMounted(() => {
  // #ifdef H5
  // H5: Adjust based on window width
  const updateGridCol = () => {
    if (window.innerWidth > 1200) {
      gridCol.value = 4
    } else if (window.innerWidth > 768) {
      gridCol.value = 3
    } else {
      gridCol.value = 2
    }
  }
  updateGridCol()
  window.addEventListener('resize', updateGridCol)
  // #endif
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  /* H5: Use viewport units for responsive sizing */
  padding: 20rpx;
  
  // #ifdef H5
  @media (min-width: 768px) {
    padding: 40rpx;
  }
  // #endif
}
</style>
```

### Example: H5 Browser Compatibility

```vue
<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  // #ifdef H5
  // Check browser compatibility
  if (!window.CSS || !CSS.supports('display', 'flex')) {
    uni.showModal({
      title: '提示',
      content: '您的浏览器版本过低，部分功能可能无法正常使用',
      showCancel: false
    })
  }
  // #endif
})
</script>
```

### Key Points

- H5 supports full CSS and SCSS features
- Use viewport units (vw, vh) for responsive sizing
- Handle window resize events for responsive components
- Check browser compatibility for modern CSS features
- Use conditional compilation (`#ifdef H5`) for H5-specific code
- Use media queries for responsive design