Respond变形

什么是 Respond 变形？

“Respond变形”并非78TP术语，通常指在响应式网页设计（Responsive Web Design）中， 利用 CSS 的 @media 查询根据设备视口尺寸动态调整布局、字体、间距等样式的行为。 这种“变形”能力使网页能在手机、平板、桌面等不同设备上优雅呈现。

基础实现方式

使用原生 CSS 媒体查询即可实现响应式变形：

@media (max-width: 768px) {

  .container {

    flex-direction: column;

  }

  h1 {

    font-size: 1.8rem;

  }

}

常见断点参考

• 手机（竖屏）：≤ 480px
• 手机（横屏）/小平板：481px – 768px
• 平板（横屏）：769px – 1024px
• 桌面：≥ 1025px

最佳实践建议

- 采用移动优先（Mobile First）策略
- 避免过度依赖固定像素，多使用 rem、%、vw/vh
- 图片使用 max-width: 100% 保证自适应
- 测试真实设备或浏览器开发者工具中的设备模拟器