Question

我有这个网站，我目前正在尝试转换为与css媒体查询电话＆amp;片剂。

我刚遇到的问题是media query的css无法读取或只是在React中无效。

任何解决方案？感谢

Answer 1

媒体查询与React无关，只要你不使用内联CSS，因为最后反应输出HTML和媒体查询是完美的。

我在反应中构建了整个前端并使其具有纯粹的响应能力。此外，我只使用1％css作为内联，并使用两个框架 1.语义 - ui 2. Flexbox Grid

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

@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媒体查询使我的React组件响应？

1 个答案: