ReactJS的媒体查询语法

如果您有特殊情况,当您需要在React应用程序中获取媒体查询结果时(例如,您希望在移动版本中显示某些组件),可以使用类似的帮助程序 react-responsive 或 react-media-hook .

不能以内联方式设置媒体查询。您需要创建一个单独的CSS样式表,然后导入样式表。

所以下面将介绍 styles.css 例如,文件。

  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

然后可以将新的CSS样式文件导入到react文件中。所以你可以加上 import './styles.css' 到你的顶端 App.jsx 文件(假设它们都在根级别),或者您可以直接将其导入到特定的react组件文件中。