ReactJS 中的媒体查询

Question

大家好，我有以下代码： my code

如您所见，我有“mystyle”，其中有 fontSize: 35px 和 color:"red"。

      const mystyle = {
        fontSize: "35px",
        color: "red"
      };

我还添加了 react-responsive 助手来设置 World 组件在 max-width 等于 600px[=31= 时可见].

const isMobile = useMediaQuery({ query: "(max-width: 600px)" }); return ( <div> <div style={mystyle}> hello </div> {isMobile && <World />} </div> );

现在我的问题是：当 max-width 等于 600px 时，如何在我的“mystyle”中将 fontSize 更改为 20px 并将 color 更改为 "blue" ？

Answer 1

const mystyle = {
        fontSize: "35px",
        color: "red"
      };

const mystyle2 = {
        fontSize: "20px",
        color: "blue"
      };

    <div style={isMobile ? mystyle2 : mystyle}> hello </div>

ReactJS 中的媒体查询

media query in ReactJS

media-queries

reactjs