鸿蒙5开发宝藏案例分享---Web适配一多开发实践

/* 别再死磕px了！ */
.container {
  width: 90%;  /* 父容器的90% */
  padding: 2rem; /* 根据根字体动态计算 */
  margin: 0.5em; /* 随当前字体缩放 */
}
/* 全屏覆盖黑科技 */
.modal {
  width: 100vw;  /* 视窗宽度 */
  height: 100vh; /* 视窗高度 */
}

/* 手机竖屏模式 */
@media (orientation: portrait) and (max-width: 599px) {
  .sidebar {
    display: none;  /* 小屏隐藏侧边栏 */
  }
}
/* 平板横屏彩蛋 */
@media (orientation: landscape) and (min-width: 600px) {
  .secret-feature {
    display: block; /* 大屏解锁隐藏功能 */
  }
}

// 实时捕捉窗口变化
window.addEventListener('resize', () => {
  const isMobile = window.innerWidth < 600;
  
  // 动态切换布局
  document.body.classList.toggle('mobile-mode', isMobile);
  
  // 像搭积木一样调整布局
  if(isMobile) {
    gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
  } else {
    gridContainer.style.gridTemplateColumns = 'repeat(4, 1fr)'; 
  }
});

/* 手机：2列紧凑布局 */
.grid-container {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
/* 平板：4列优雅展示 */
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
/* 折叠屏展开态：6列影院模式 */
@media (min-width: 840px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
}

.custom-dialog {
  /* 基础手机尺寸 */
  width: 300px;
  height: 200px;
}
/* 平板适配 */
@media (min-width: 600px) {
  .custom-dialog {
    width: 400px;
    height: 300px;
    /* 居中放大动画 */
    animation: scaleUp 0.3s ease;
  }
}
@keyframes scaleUp {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}

// 动态计算可见卡片数
function calculateSlidesPerView() {
  const containerWidth = document.querySelector('.carousel').offsetWidth;
  
  if(containerWidth > 1024) return 4;
  if(containerWidth > 768) return 3;
  return 2;
}
// 切换设备时自动更新
window.addEventListener('resize', () => {
  swiper.params.slidesPerView = calculateSlidesPerView();
  swiper.update();
});