响应式布局

1. 使用 Flex 和 Grid 作为主要布局方式，
2. 通过 CSS3 Media Query​ 设置断点（768 / 1024），
3. 在移动端切换为纵向布局，
4. 使用 REM / VW​ 保证字体和间距自适应，
5. 在布局差异极大的场景下，通过 React Hook 监听窗口尺寸​ 动态切换组件。

Grid布局

.grid {
  display: grid;
  grid-template-areas: //给网格区域起名  三行两列
    "header header"
    "sidebar content"
    "footer footer";
   //设置侧边栏固定宽度和内容自适应
  grid-template-columns: 240px 1fr; // 侧边栏固定宽度 剩余空间全给内容区
  gap: 16px;
}

//子元素绑定区域名
.header { grid-area: header; }
.aside  { grid-area: sidebar; }
.main   { grid-area: content; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .grid {
    grid-template-areas: //四行一列
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

REM-JS 设置根字体大小

//以 375 设计稿为基准，等比缩放字体和布局，但在大屏上限制最大缩放倍数，防止页面变形
function setRem() {
  const baseSize = 16
  //计算缩放比例
  const scale = document.documentElement.clientWidth / 375
  //scale与2之间选择最小值  最大限制不能超过2
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + 'px'
}
setRem()
window.onresize = setRem