Web Design Clip 国际网页设计案例分析 响应式布局优化技巧 2025

.product-card {  
  container-type: size;  
  display: grid;  
  grid-template-columns: fr fr;  
  gap: px;  
}  

@container (max-width: px) {  
  .product-card {  
    grid-template-columns: fr;  
    gap: px;  
  }  
}  

h1 {  
  font-size: clamp(1.5rem, vw, rem);  
}  
p {  
  font-size: clamp(rem, 2.5vw, 1.25rem);  
}  

.container {  
  height: lvh;  
  overflow: auto;  
}  

// 预测用户滚动行为  
function predictScrollBehavior(scrollHistory) {  
  // 使用LSTM模型预测  
  return model.predict(scrollHistory);  
}  

// 动态调整布局  
function adjustLayout(prediction) {  
  if (prediction === 'fast') {  
    document.documentElement.style.setProperty('--font-size', '1.2rem');  
  } else {  
    document.documentElement.style.setProperty('--font-size', '1rem');  
  }  
}  

// 定义设备断点  
const breakpoints = {  
  phone: ,  
  tablet: ,  
  foldable: ,  
  ar: '3d'  
};  

// 根据设备类型自动选择布局  
@Entry  
@Component  
struct AdaptiveLayout {  
  build() {  
    Column() {  
      if (Device.width >= breakpoints.tablet) {  
        // 平板布局  
        Row() { /* 两列布局 */ }  
      } else {  
        // 手机布局  
        Column() { /* 单列布局 */ }  
      }  
    }  
  }  
}  

<img src="product.jpg"  
     srcset="product-320.jpg 320w,  
             product-640.jpg 640w,  
             product-1280.jpg 1280w"  
     sizes="(max-width: 600px) 100vw, 50vw"  
     alt="产品图片">  

const observer = new IntersectionObserver((entries) => {  
  entries.forEach(entry => {  
    if (entry.isIntersecting) {  
      const img = entry.target;  
      img.src = img.dataset.src;  
      observer.unobserve(img);  
    }  
  });  
});  

document.querySelectorAll('img.lazy-load').forEach(img => {  
  observer.observe(img);  
});  

:root {  
  --primary-color: #A47864; /* 摩卡慕斯色 */  
}  

@media (max-width: px) {  
  :root {  
    --primary-color: #D4A894; /* 移动端提亮 */  
  }  
}  

// 检测网络状态  
const network = navigator.connection;  
if (network.effectiveType === '4g') {  
  // 加载完整布局  
  loadFullLayout();  
} else {  
  // 加载精简布局  
  loadLiteLayout();  
}