多平台屏幕江湖生存指南

4. 灵活的网格系统

使用动态列数的网格布局，像变形积木可以重组成不同形状。

<template>
  <view class="grid-container">
    <view 
      class="grid-item"
      v-for="(item, index) in items"
      :key="index"
      :style="{ width: gridItemWidth }"
    >
      <view class="item-content">
        <image :src="item.image">{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      screenWidth: 375,
      columns: 2 // 默认2列
    }
  },
  computed: {
    gridItemWidth() {
      // 计算每项的宽度(减去间距)
      const gap = 20; // 项目之间的间距
      const containerPadding = 40; // 容器左右内边距总和
      const availableWidth = this.screenWidth - containerPadding;
      const totalGapWidth = gap * (this.columns - 1); // 所有间隙的总宽度
      const itemWidth = (availableWidth - totalGapWidth) / this.columns;
      return itemWidth + 'px';
    }
  },
  created() {
    // 获取屏幕宽度
    const info = uni.getSystemInfoSync();
    this.screenWidth = info.screenWidth;
    
    // 根据屏幕宽度决定列数
    if (this.screenWidth >= 768) {
      this.columns = 4; // 平板显示4列
    } else if (this.screenWidth >= 480) {
      this.columns = 3; // 大手机显示3列
    } else {
      this.columns = 2; // 小手机显示2列
    }
    
    // 监听窗口大小变化(主要用于H5和App)
    // #ifdef H5 || APP-PLUS
    uni.onWindowResize((res) => {
      this.screenWidth = res.size.windowWidth;
      
      // 重新计算列数
      if (this.screenWidth >= 768) {
        this.columns = 4;
      } else if (this.screenWidth >= 480) {
        this.columns = 3;
      } else {
        this.columns = 2;
      }
    });
    // #endif
  }
}
</script>

<style>
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.grid-item {
  margin-bottom: 20rpx;
}

.item-content {
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.item-image {
  width: 100%;
  height: 200rpx;
}

.item-title {
  font-size: 28rpx;
  padding: 16rpx;
  display: block;
}
</style>

5. 横竖屏适应

针对屏幕旋转提供优化布局，就像书本可以竖着看也可以横着看。

<template>
  <view :class="['container', orientation]">
    <!-- 不同方向显示不同布局 -->
    <view v-if="orientation === 'portrait'" class="portrait-layout">
      <!-- 竖屏布局 - 垂直堆叠 -->
      <view class="header">
        <image class="banner" :src="banner">{ title }}</text>
        <text class="subtitle">{
           { subtitle }}</text>
        <view class="action-buttons">
          <button class="primary-btn">主操作</button>
          <button class="secondary-btn">次操作</button>
        </view>
      </view>
    </view>
    
    <view v-else class="landscape-layout">
      <!-- 横屏布局 - 左右布局 -->
      <view class="left-section">
        <image class="banner" :src="banner">{ title }}</text>
        <text class="subtitle">{
           { subtitle }}</text>
        <view class="action-buttons">
          <button class="primary-btn">主操作</button>
          <button class="secondary-btn">次操作</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    subtitle: String,
    banner: String
  },
  data() {
    return {
      orientation: 'portrait' // 默认竖屏
    }
  },
  created() {
    // 获取初始方向
    this.checkOrientation();
    
    // 监听屏幕旋转(App和H5支持)
    // #ifdef APP-PLUS || H5
    uni.onWindowResize(() => {
      this.checkOrientation();
    });
    // #endif
  },
  methods: {
    checkOrientation() {
      const systemInfo = uni.getSystemInfoSync();
      if (systemInfo.windowWidth > systemInfo.windowHeight) {
        this.orientation = 'landscape';
      } else {
        this.orientation = 'portrait';
      }
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}

/* 竖屏布局样式 */
.portrait-layout {
  display: flex;
  flex-direction: column;
}

.portrait-layout .header {
  width: 100%;
  height: 500rpx;
}

.portrait-layout .banner {
  width: 100%;
  height: 100%;
}

.portrait-layout .content {
  padding: 40rpx;
}

.portrait-layout .title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.portrait-layout .subtitle {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.portrait-layout .action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 横屏布局样式 */
.landscape-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.landscape-layout .left-section {
  flex: 1;
  height: 100%;
}

.landscape-layout .banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landscape-layout .right-section {
  flex: 1;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landscape-layout .title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.landscape-layout .subtitle {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.landscape-layout .action-buttons {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
}

/* 通用按钮样式 */
.primary-btn, .secondary-btn {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.primary-btn {
  background-color: #1890ff;
  color: white;
}

.secondary-btn {
  background-color: #f5f5f5;
  color: #333;
}
</style>

6. 大屏特殊优化

平板和PC等大屏幕需要特殊照顾，像设计大房子和小房子的区别。

<template>
  <view :class="['page-container', deviceType]">
    <!-- 导航区：在大屏上显示为侧边栏，小屏上显示为顶部导航 -->
    <view :class="['nav-area', {'side-nav': isLargeScreen, 'top-nav': !isLargeScreen}]">
      <view class="logo">
        <image src="/static/logo.png">{ item.name }}
        </view>
      </view>
    </view>
    
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 大屏显示更丰富的列表项 -->
      <view class="item-list">
        <view 
          v-for="(item, index) in listItems"
          :key="index"
          :class="['list-item', {'detailed': isLargeScreen}]"
        >
          <image class="item-image" :src="item.image">{ item.title }}</text>
            
            <!-- 小屏只显示价格 -->
            <view v-if="!isLargeScreen" class="item-price">¥{
           { item.price }}</view>
            
            <!-- 大屏显示更多详情 -->
            <view v-else class="item-details">
              <text class="item-desc">{
           { item.description }}</text>
              <view class="item-meta">
                <text class="item-price">¥{
           { item.price }}</text>
                <text class="item-rating">评分: {
           { item.rating }}</text>
                <text class="item-sales">已售: {
           { item.sales }}</text>
              </view>
              <view class="action-row">
                <button class="action-btn">查看详情</button>
                <button class="action-btn primary">加入购物车</button>
              </view>
            </view>
          </view>
          
          <!-- 小屏显示简化操作按钮 -->
          <view v-if="!isLargeScreen" class="item-actions">
            <button class="mini-btn">+</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceType: 'mobile', // 默认移动设备
      isLargeScreen: false, // 默认不是大屏
      menuVisible: false, // 菜单默认隐藏(小屏使用)
      navItems: [
        { name: '首页', url: '/pages/index/index' },
        { name: '分类', url: '/pages/category/category' },
        { name: '购物车', url: '/pages/cart/cart' },
        { name: '我的', url: '/pages/profile/profile' }
      ],
      listItems: [
        // 模拟数据
{ 
  id: 1, 
  title: '超级智能手机',
  image: '/static/products/phone1.jpg',
  price: 2999,
  description: '最新一代智能手机，搭载高通骁龙处理器，6.7英寸超清屏幕...',
  rating: 4.8,
  sales: 3240
},
{ 
  id: 2, 
  title: '无线蓝牙耳机',
  image: '/static/products/headphone.jpg',
  price: 499,
  description: '主动降噪，50小时超长续航，IPX7防水...',
  rating: 4.6,
  sales: 8752
},
// 更多商品...
]
    };
  },
  created() {
    this.detectScreenSize();
    
    // #ifdef H5 || APP-PLUS
    // 监听屏幕大小变化
    uni.onWindowResize(() => {
      this.detectScreenSize();
    });
    // #endif
  },
  methods: {
    detectScreenSize() {
      const sysInfo = uni.getSystemInfoSync();
      const screenWidth = sysInfo.screenWidth;
      
      // 判断设备类型
      if (screenWidth >= 768) {
        this.deviceType = 'tablet';
        this.isLargeScreen = true;
      } else if (screenWidth >= 1024) {
        this.deviceType = 'desktop';
        this.isLargeScreen = true;
      } else {
        this.deviceType = 'mobile';
        this.isLargeScreen = false;
      }
    },
    
    toggleMenu() {
      this.menuVisible = !this.menuVisible;
    },
    
    navigateTo(url) {
      uni.navigateTo({ url });
      // 小屏幕导航后自动隐藏菜单
      if (!this.isLargeScreen) {
        this.menuVisible = false;
      }
    }
  }
}
</script>

<style>
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

/* 平板和桌面端使用不同布局 */
.page-container.tablet,
.page-container.desktop {
  flex-direction: row;
}

/* 导航区域样式 */
.nav-area {
  background-color: #333;
  color: white;
}

/* 顶部导航样式(小屏) */
.top-nav {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

/* 侧边导航样式(大屏) */
.side-nav {
  width: 250rpx;
  height: 100vh;
  padding: 40rpx 20rpx;
}

.logo {
  height: 60rpx;
}

.menu-toggle {
  font-size: 48rpx;
}

/* 导航菜单 */
.nav-menu {
  display: flex;
}

/* 小屏菜单默认隐藏 */
.top-nav .nav-menu {
  position: absolute;
  top: 100rpx;
  left: 0;
  width: 100%;
  background-color: #333;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.3s;
  z-index: 100;
}

.top-nav .nav-menu.active {
  transform: translateY(0);
}

/* 大屏菜单总是垂直显示 */
.side-nav .nav-menu {
  flex-direction: column;
  margin-top: 60rpx;
}

.nav-item {
  padding: 20rpx;
  font-size: 32rpx;
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

/* 列表项 */
.list-item {
  margin-bottom: 20rpx;
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
}

/* 小屏列表项 */
.device-mobile .list-item {
  height: 180rpx;
}

/* 大屏列表项 */
.list-item.detailed {
  height: 300rpx;
}

.item-image {
  width: 180rpx;
  height: 100%;
  object-fit: cover;
}

.list-item.detailed .item-image {
  width: 300rpx;
}

.item-info {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.item-price {
  color: #ff4d4f;
  font-size: 36rpx;
  font-weight: bold;
}

/* 大屏专属详情样式 */
.item-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.item-desc {
  font-size: 26rpx;
  color: #666;
  margin: 10rpx 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta {
  display: flex;
  margin: 10rpx 0;
}

.item-rating, .item-sales {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.action-row {
  display: flex;
  margin-top: auto;
}

.action-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  margin-right: 20rpx;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 30rpx;
}

.action-btn.primary {
  background-color: #1890ff;
  color: white;
}

/* 小屏专属操作按钮 */
.item-actions {
  display: flex;
  align-items: center;
  padding-right: 20rpx;
}

.mini-btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 56rpx;
  text-align: center;
  background-color: #1890ff;
  color: white;
  border-radius: 30rpx;
  font-size: 36rpx;
}
</style>

7. 平台特异性处理：各平台的专属服装

每个平台都有自己的特殊需求，就像不同场合需要不同服装。

<template>
  <view class="container">
    <view class="title-area">
      <text class="page-title">{
           { title }}</text>
      
      <!-- #ifdef APP-PLUS -->
      <!-- 原生APP导航栏集成 -->
      <view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- #endif -->
      
      <!-- 微信小程序胶囊按钮适配 -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="capsule-placeholder" :style="{ width: menuButtonWidth + 'px' }"></view>
      <!-- #endif -->
    </view>
    
    <view class="content-area">
      <!-- 平台特异性内容 -->
      
      <!-- #ifdef MP-WEIXIN -->
      <!-- 微信小程序特有UI -->
      <view class="wx-specific">
        <button open-type="share" class="share-btn">分享给朋友</button>
        <button open-type="contact" class="contact-btn">联系客服</button>
      </view>
      <!-- #endif -->
      
      <!-- #ifdef MP-ALIPAY -->
      <!-- 支付宝小程序特有UI -->
      <view class="ali-specific">
        <button class="ali-btn" @tap="aliShare">支付宝分享</button>
      </view>
      <!-- #endif -->
      
      <!-- #ifdef APP-PLUS -->
      <!-- APP特有功能 -->
      <view class="app-specific">
        <button class="app-btn" @tap="checkUpdate">检查更新</button>
        <button class="app-btn" @tap="downloadResource">下载资源</button>
      </view>
      <!-- #endif -->
      
      <!-- #ifdef H5 -->
      <!-- H5特有功能 -->
      <view class="h5-specific">
        <button class="h5-btn" @tap="copyLink">复制链接</button>
      </view>
      <!-- #endif -->
      
      <!-- 通用内容：所有平台共享 -->
      <view class="common-content">
        <text class="hint">以下是所有平台通用内容</text>
        <!-- 其他通用内容 -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '平台适配示例',
      statusBarHeight: 20, // 默认状态栏高度
      menuButtonWidth: 87  // 默认胶囊按钮宽度
    }
  },
  created() {
    this.initPlatformSpecific();
  },
  methods: {
    initPlatformSpecific() {
      // 获取系统信息
      const sysInfo = uni.getSystemInfoSync();
      
      // #ifdef APP-PLUS
      // 设置APP状态栏高度
      this.statusBarHeight = sysInfo.statusBarHeight;
      // #endif
      
      // #ifdef MP-WEIXIN
      // 获取微信胶囊按钮信息
      const menuButton = wx.getMenuButtonBoundingClientRect();
      this.menuButtonWidth = menuButton.width + 10; // 加上右边距
      // #endif
    },
    
    // 平台特异性方法
    // #ifdef MP-ALIPAY
    aliShare() {
      my.showSharePanel();
    },
    // #endif
    
    // #ifdef APP-PLUS
    checkUpdate() {
      uni.showToast({
        title: '检查更新中...',
        icon: 'loading'
      });
      
      // 模拟检查更新过程
      setTimeout(() => {
        uni.showToast({
          title: '已是最新版本',
          icon: 'success'
        });
      }, 1500);
    },
    
    downloadResource() {
      uni.showLoading({
        title: '资源下载中...'
      });
      
      // 模拟下载过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '下载完成',
          icon: 'success'
        });
      }, 2000);
    },
    // #endif
    
    // #ifdef H5
    copyLink() {
      const url = var test;
      // 创建临时输入框
      const input = document.createElement('input');
      input.setAttribute('readonly', 'readonly');
      input.value = url;
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      
      uni.showToast({
        title: '链接已复制',
        icon: 'success'
      });
    }
    // #endif
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
}

.title-area {
  position: relative;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1890ff;
  color: white;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
}

.status-bar-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.capsule-placeholder {
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translateY(-50%);
  height: 60rpx;
}

.content-area {
  padding: 30rpx;
}

/* 平台特异性样式 */
.wx-specific, .ali-specific, .app-specific, .h5-specific {
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 12rpx;
}

.wx-specific {
  background-color: #07c160;
}

.ali-specific {
  background-color: #00aaff;
}

.app-specific {
  background-color: #fa6400;
}

.h5-specific {
  background-color: #9c27b0;
}

.share-btn, .contact-btn, .ali-btn, .app-btn, .h5-btn {
  margin: 10rpx 0;
  color: white;
}

.share-btn, .contact-btn {
  background-color: #07c160;
}

.ali-btn {
  background-color: #00aaff;
}

.app-btn {
  background-color: #fa6400;
}

.h5-btn {
  background-color: #9c27b0;
}

.common-content {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.hint {
  font-size: 28rpx;
  color: #666;
}
</style>

实战技巧：屏幕适配高级战略

1. 智能组件：适配的前线战士

打造自适应组件是屏幕适配的关键，就像训练能在任何环境中作战的特种兵。

<!-- AdaptiveCard.vue - 智能适应不同屏幕尺寸的卡片组件 -->
<template>
  <view 
    :class="['adaptive-card', orientation, layout]" 
    :style="customStyle"
  >
    <view class="card-media" :style="mediaStyle">
      <slot name="media">
        <image 
          v-if="media" 
          :src="media">{ title }}</text>
      </slot>
      
      <slot name="content">
        <text v-if="content" class="card-content">{
           { content }}</text>
      </slot>
      
      <view class="card-actions">
        <slot name="actions"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AdaptiveCard',
  props: {
    // 卡片内容
    title: String,
    content: String,
    media: String,
    
    // 布局控制
    layout: {
      type: String,
      default: 'auto', // auto, horizontal, vertical
      validator: val => ['auto', 'horizontal', 'vertical'].includes(val)
    },
    
    // 自定义样式
    cardStyle: {
      type: Object,
      default: () => ({})
    },
    mediaStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      screenWidth: 375,
      orientation: 'portrait', // portrait or landscape
      deviceType: 'mobile' // mobile, tablet, desktop
    }
  },
  computed: {
    // 合并自定义样式与默认样式
    customStyle() {
      return {
        ...this.getDeviceTypeStyle(),
        ...this.cardStyle
      }
    }
  },
  created() {
    this.updateScreenInfo();
    
    // #ifdef H5 || APP-PLUS
    uni.onWindowResize(() => {
      this.updateScreenInfo();
    });
    // #endif
  },
  methods: {
    updateScreenInfo() {
      const sysInfo = uni.getSystemInfoSync();
      this.screenWidth = sysInfo.screenWidth;
      
      // 判断横竖屏
      if (sysInfo.screenWidth > sysInfo.screenHeight) {
        this.orientation = 'landscape';
      } else {
        this.orientation = 'portrait';
      }
      
      // 判断设备类型
      if (this.screenWidth >= 768 && this.screenWidth < 1024) {
        this.deviceType = 'tablet';
      } else if (this.screenWidth >= 1024) {
        this.deviceType = 'desktop';
      } else {
        this.deviceType = 'mobile';
      }
    },
    
    // 根据设备类型返回默认样式
    getDeviceTypeStyle() {
      switch(this.deviceType) {
        case 'tablet':
          return {
            borderRadius: '16rpx',
            boxShadow: '0 4rpx 12rpx rgba(0, 0, 0, 0.1)'
          };
        case 'desktop':
          return {
            borderRadius: '20rpx',
            boxShadow: '0 8rpx 24rpx rgba(0, 0, 0, 0.15)'
          };
        default: // mobile
          return {
            borderRadius: '12rpx',
            boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.1)'
          };
      }
    }
  }
}
</script>

<style>
.adaptive-card {
  background-color: #ffffff;
  margin: 20rpx;
  overflow: hidden;
  transition: all 0.3s;
}

/* 垂直布局 */
.adaptive-card.vertical {
  display: flex;
  flex-direction: column;
}

.adaptive-card.vertical .card-media {
  width: 100%;
  height: 350rpx;
}

/* 水平布局 */
.adaptive-card.horizontal {
  display: flex;
  flex-direction: row;
  height: 250rpx;
}

.adaptive-card.horizontal .card-media {
  width: 250rpx;
  height: 100%;
}

/* 自动布局 - 基于屏幕尺寸自动选择 */
.adaptive-card.auto.portrait {
  display: flex;
  flex-direction: column;
}

.adaptive-card.auto.portrait .card-media {
  width: 100%;
  height: 350rpx;
}

.adaptive-card.auto.landscape {
  display: flex;
  flex-direction: row;
  height: 250rpx;
}

.adaptive-card.auto.landscape .card-media {
  width: 250rpx;
  height: 100%;
}

/* 内容区样式 */
.card-body {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-content {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}

.card-actions {
  margin-top: 16rpx;
  display: flex;
  justify-content: flex-end;
}

/* 媒体内容样式 */
.media-content {
  width: 100%;
  height: 100%;
}

/* 设备类型特异性样式 */
/* 平板样式 */
@media screen and (min-width: 768px) {
  .card-title {
    font-size: 36rpx;
  }
  
  .card-content {
    font-size: 30rpx;
  }
}

/* 桌面样式 */
@media screen and (min-width: 1024px) {
  .card-title {
    font-size: 40rpx;
  }
  
  .card-content {
    font-size: 32rpx;
  }
}
</style>

使用智能组件示例：

<template>
  <view class="page">
    <!-- 基本用法 -->
    <adaptive-card 
      title="智能适应卡片" 
      content="自动适应各种屏幕尺寸和方向" 
      media="/static/images/card-image.jpg" 
    />
    
    <!-- 强制水平布局 -->
    <adaptive-card 
      layout="horizontal"
      title="水平布局卡片" 
      content="始终使用水平布局，无论屏幕大小" 
      media="/static/images/card-image.jpg" 
    />
    
    <!-- 自定义样式 -->
    <adaptive-card 
      title="自定义样式卡片" 
      content="使用自定义样式的卡片" 
      media="/static/images/card-image.jpg" 
      :card-style="{ backgroundColor: '#f0f8ff' }"
      :media-style="{ borderRadius: '50%' }"
    />
    
    <!-- 使用插槽自定义内容 -->
    <adaptive-card>
      <template #title>
        <view class="custom-title">
          <text class="main-title">定制标题</text>
          <text class="sub-title">副标题文本</text>
        </view>
      </template>
      
      <template #content>
        <view class="custom-content">
          <text>完全自定义的内容区域</text>
          <progress :percent="80" stroke-width="4" />
        </view>
      </template>
      
      <template #actions>
        <button class="custom-btn">自定义按钮</button>
      </template>
      
      <template #media>
        <video 
          src="/static/videos/demo.mp4"
          class="media-content"
          controls
        ></video>
      </template>
    </adaptive-card>
  </view>
</template>

<script>
import AdaptiveCard from '@/components/AdaptiveCard.vue';

export default {
  components: {
    AdaptiveCard
  }
}
</script>

<style>
.page {
  padding: 20rpx;
}

.custom-title {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1890ff;
}

.sub-title {
  font-size: 24rpx;
  color: #999;
}

.custom-content {
  margin: 20rpx 0;
}

.custom-btn {
  background-color: #1890ff;
  color: white;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}
</style>

2. 屏幕适配调试技巧

模拟不同屏幕尺寸进行测试，就像试衣服需要不同体型的模特。

<template>
  <view class="debug-container">
    <!-- 调试工具栏 -->
    <view v-if="showDebugTools" class="debug-toolbar">
      <!-- 设备选择器 -->
      <picker 
        :value="deviceIndex" 
        :range="deviceList" 
        range-key="name"
        @change="onDeviceChange"
      >
        <view class="device-picker">{
           { deviceList[deviceIndex].name }}</view>
      </picker>
      
      <!-- 方向切换 -->
      <view 
        class="orientation-toggle"
        @tap="toggleOrientation"
      >
        {
           { isLandscape ? '横屏' : '竖屏' }}
      </view>
      
      <!-- 关闭调试工具 -->
      <view class="close-btn" @tap="toggleDebugTools">关闭</view>
    </view>
    
    <!-- 调试启动按钮 -->
    <view 
      v-else 
      class="debug-toggle-btn"
      @tap="toggleDebugTools"
    >
      调试工具
    </view>
    
    <!-- 模拟设备框架 -->
    <view 
      :class="['device-simulator', {'landscape': isLandscape}]"
      :style="deviceStyle"
    >
      <!-- 应用内容 -->
      <view class="app-content">
        <slot></slot>
      </view>
    </view>
    
    <!-- 尺寸信息 -->
    <view v-if="showDebugTools" class="size-info">
      屏幕尺寸: {
           { deviceWidth }}px × {
           { deviceHeight }}px
      <text v-if="isLandscape">(横屏)</text>
      <text v-else>(竖屏)</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ScreenDebugger',
  data() {
    return {
      showDebugTools: false,
      deviceIndex: 0,
      isLandscape: false,
      deviceList: [
        { name: 'iPhone SE', width: 320, height: 568 },
        { name: 'iPhone X/11', width: 375, height: 812 },
        { name: 'iPhone 12 Pro Max', width: 428, height: 926 },
        { name: 'Android Common', width: 360, height: 640 },
        { name: 'iPad Mini', width: 768, height: 1024 },
        { name: 'iPad Pro', width: 834, height: 1194 },
        { name: 'Desktop', width: 1280, height: 800 }
      ]
    }
  },
  computed: {
    currentDevice() {
      return this.deviceList[this.deviceIndex];
    },
    
    deviceWidth() {
      return this.isLandscape ? this.currentDevice.height : this.currentDevice.width;
    },
    
    deviceHeight() {
      return this.isLandscape ? this.currentDevice.width : this.currentDevice.height;
    },
    
    deviceStyle() {
      const scale = 0.9; // 缩放比例，确保设备显示在视窗内
      
      return {
        width: this.deviceWidth * scale + 'px',
        height: this.deviceHeight * scale + 'px'
      }
    }
  },
  methods: {
    toggleDebugTools() {
      this.showDebugTools = !this.showDebugTools;
    },
    
    onDeviceChange(e) {
      this.deviceIndex = e.detail.value;
    },
    
    toggleOrientation() {
      this.isLandscape = !this.isLandscape;
    }
  }
}
</script>

<style>
.debug-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.debug-toolbar {
  display: flex;
  width: 100%;
  padding: 20rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.device-picker {
  flex: 1;
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
}

.orientation-toggle, .close-btn {
  margin-left: 20rpx;
  padding: 10rpx 20rpx;
  background-color: #1890ff;
  color: white;
  border-radius: 6rpx;
}

.close-btn {
  background-color: #ff4d4f;
}

.debug-toggle-btn {
  position: fixed;
  right: 20rpx;
  bottom: 20rpx;
  padding: 10rpx 20rpx;
  background-color: #1890ff;
  color: white;
  border-radius: 6rpx;
  z-index: 999;
}

.device-simulator {
  border: 4rpx solid #333;
  border-radius: 20rpx;
  overflow: hidden;
  transition: all 0.3s;
  background-color: white;
}

.device-simulator.landscape {
  transform: rotate(90deg);
}

.app-content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.size-info {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}
</style>

屏幕适配的终极智慧：智能变形，万能适配

屏幕适配就像一场智慧的游戏，你需要让你的应用像变色龙一样适应任何环境。

┌────────────────────────────────────────────────────────┐
│             【屏幕适配的终极智慧】                     │
├────────────────────────┬───────────────────────────────┤
│ 设计上思考              │ 代码上执行                    │
├────────────────────────┼───────────────────────────────┤
│ 内容决定形式           │ 弹性优先，固定次之           │
├────────────────────────┼───────────────────────────────┤
│ 重要内容优先展示       │ 响应式隐藏与显示             │
├────────────────────────┼───────────────────────────────┤
│ 功能体验一致           │ 布局可变，功能不变           │
├────────────────────────┼───────────────────────────────┤
│ 适应而非简单缩放       │ 重排优于等比缩放             │
└────────────────────────┴───────────────────────────────┘

UniApp 屏幕适配的最高境界，就是让用户忘记他们在使用什么屏幕，无论什么设备，体验都是流畅自然的。这就像一位出色的演说家，能够让不同背景的听众都感到她在专门对自己说话一样。