如何在React Hooks+TypeScript样式组件中动态设置媒体断点

核心思路 #

放弃固定宽高比，根据屏幕断点动态切换容器的宽高计算逻辑：在移动端（比如宽度≤768px）使用宽/高＜1的比例，确保高度大于宽度；桌面端保留原有比例。

具体实现步骤 #

1. 修改Resize处理逻辑，动态切换宽高比

直接在handleResize函数中根据容器宽度判断设备类型，替换固定的aspectRatio：

const [container, setContainer] = useState({ width: 0, height: 0});

function handleResize(contentRect) {
  const { width } = contentRect.bounds;
  // 定义断点：宽度≤768px时判定为移动端
  const isMobile = width <= 768;
  // 移动端用宽/高=0.7 → 高度=宽度/0.7（高度＞宽度）；桌面端保留原比例0.586
  const targetAspectRatio = isMobile ? 0.7 : 0.586;
  
  setContainer({
    width: width,
    height: Math.round(width / targetAspectRatio)
  });
}

2. 调整CSS样式适配移动端

修改Container的styled-components样式，确保移动端容器不会被最大高度限制住：

export const Container = styled.div`
  position: relative;
  width: 100%;
  max-width: ${({ maxWidth }) => maxWidth && `${maxWidth}px`};
  max-height: ${({ maxHeight }) => maxHeight && `${maxHeight}px`};
  overflow: hidden;

  /* 移动端强制容器高度适配，避免max-height限制 */
  @media (max-width: 768px) {
    max-height: 100vh;
    /* 可选：确保容器最小高度满足高＞宽的比例 */
    min-height: calc(100vw / 0.7);
  }
`;

3. 修复高度固定问题

之前高度固定的原因是始终使用固定的0.586比例，且容器max-width可能限制了宽度变化。现在通过动态切换比例，当屏幕宽度变化（比如从桌面端缩到移动端）时，高度会自动按新比例计算，不再固定。

可选优化：使用媒体查询Hook监听断点 #

如果需要在组件多个地方复用设备判断逻辑，可以封装一个简单的Hook：

function useMediaQuery(query) {
  const [matches, setMatches] = useState(window.matchMedia(query).matches);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    const updateMatches = (e) => setMatches(e.matches);
    
    mediaQuery.addEventListener('change', updateMatches);
    return () => mediaQuery.removeEventListener('change', updateMatches);
  }, [query]);

  return matches;
}

然后在组件中使用：

const isMobile = useMediaQuery('(max-width: 768px)');
const targetAspectRatio = isMobile ? 0.7 : 0.586;

function handleResize(contentRect) {
  const { width } = contentRect.bounds;
  setContainer({
    width: width,
    height: Math.round(width / targetAspectRatio)
  });
}

内容的提问来源于stack exchange，提问作者Indradeep