React使用styled-components实现响应式动态字体大小的问题咨询

• 字符串对比逻辑错误：你代码中props.width>"870px"是字符串逐位对比规则，"1920px"首字符ASCII码比"8"小，所以判断结果永远为false，才会固定输出16px
• 属性传递缺失：你定义了Adp样式组件但实际用的是AdTitle，且没有把width属性传递给文本组件，样式组件拿不到对比的参考值
• 固定传值无法响应变化：父组件传入的width是固定值1920px，就算逻辑修复也不会随屏幕尺寸自动更新

方案1：修复现有逻辑，按传入的width属性动态适配 #

先修复对比逻辑和属性传递问题，即可实现根据传入的width参数动态调整字体大小：

// 提取px数值的工具函数
const getPxValue = (pxStr) => Number(pxStr.replace('px', ''))

const AdContainer = styled.div`
  max-width: ${props => props.width};
  max-height: ${props => props.height};
`;  

// 统一组件名，和实际调用的AdTitle对应
const AdTitle = styled.p`
  font-size: ${props => getPxValue(props.width) > 870 ? "24px" : "16px"};
`;

function Ad({height, width}) {
  return (
    <AdContainer height={height} width={width}>
         {/* 把width属性传给文本组件 */}
         <AdTitle width={width}>Hello</AdTitle>
    </AdContainer>
  );
}

修改后传入width="1920px"时就会正确渲染24px字体。

方案2：实现随屏幕尺寸自动响应适配 #

如果需要组件自动跟随屏幕宽度变化调整，不需要父组件传动态width参数，推荐两种成熟方案：

方式A：CSS媒体查询（最简方案） #

直接在styled-components中写媒体查询规则，不需要JS监听逻辑，自动响应视口变化：

const AdTitle = styled.p`
  font-size: 16px;
  /* 视口宽度大于870px时自动切换字号 */
  @media (min-width: 870px) {
    font-size: 24px;
  }
`;

function Ad({height,width}) {
  return (
    <AdContainer height={height} width={width}>
         <AdTitle>Hello</AdTitle>
    </AdContainer>
  );
}

方式B：监听容器实际宽度（适配容器尺寸场景） #

如果需要根据Ad组件本身的实际渲染宽度适配，而非全局视口，用ResizeObserver监听容器尺寸：

import { useState, useRef, useEffect } from 'react';

const AdContainer = styled.div`
  max-width: ${props => props.width};
  max-height: ${props => props.height};
`;  

const AdTitle = styled.p`
  font-size: ${props => props.containerWidth > 870 ? "24px" : "16px"};
`;

function Ad({height, width}) {
  const containerRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState(0);

  useEffect(() => {
    const observer = new ResizeObserver(entries => {
      setContainerWidth(entries[0].contentRect.width);
    });
    observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <AdContainer ref={containerRef} height={height} width={width}>
         <AdTitle containerWidth={containerWidth}>Hello</AdTitle>
    </AdContainer>
  );
}

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