如何让我的 React 组件通过 css 媒体查询做出响应？答案

【问题标题】：How do I make my React Components to be responsive via css media queries?如何让我的 React 组件通过 css 媒体查询做出响应？
【发布时间】：2017-02-25 11:32:16
【问题描述】：

我有这个网站，我目前正在尝试将其转换为对手机和平板电脑的 css 媒体查询做出反应。

我刚刚遇到的问题是 media query 的 css 没有被读取或者根本无法在 React 中工作。

有什么解决办法吗？谢谢

【问题讨论】：

你可以研究像aphrodite这样的框架。它们支持媒体查询和条件样式。
您能否以一段代码为例说明您是如何实现这一目标的？
@FabianSchultz 我可能会使用它，因为它也支持字体
@EdmarMiyake 基本上我已经有media queries 但是如果我是正确的，React 不会读取它。所以基本上我正在寻找如何使用我拥有的这些media queries 的解决方案。

标签： css reactjs media-queries

【解决方案1】：

媒体查询与 React 无关，只要您不使用内联 CSS，因为最后 react 输出 HTML 并且媒体查询可以完美运行。

我在 react 中构建了整个前端，并使其成为纯响应式的。我也只使用了 1% css 作为内联并且正在使用两个框架 1.语义-ui 2.弹性盒网格

以及以下媒体查询（写入较少的变量）。

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";
@desktop-above: ~"only screen and (min-width: 950px)";
@tablet-above: ~"only screen and (min-width: 530px)";
@mobile-above: ~"only screen and (min-width: 320px)";

【讨论】：

哦，真的吗？我没有意识到这一点。非常感谢！我的朋友硬编码了一些 CSS 样式，所以我不知道这是主要问题。再次感谢。
1st，不要使用内联css，将类或样式应用于组件并使用普通的css/less并直接在组件文件或页面中使用它。
我确实使用类或 id，只是我的朋友做了这些页面，而我只是转换为 jsx，然后我发现了问题。但是感谢您的澄清，这确实有助于缓解问题。