为什么我的 React 样式表媒体查询不起作用？

Question

我正在将外部样式表连接到我的 React 组件，并且我有一个媒体查询，当屏幕宽度小于 300px 时，我希望徽标的高度为 100vh。 但是，此媒体查询将被忽略，并且仅适用原始样式。 我尝试使用样式标记直接在 HTML 文件中添加 css。 这是相关的代码：

标志.js

import React from "react";
import "./Logo.css";

export default class Logo extends React.Component {
  render() {
    return (
      <img 
        alt=""
        className="Logo"
        src="../logo.png"
      />
    );
  };  
};

标志.css

.Logo {
  position: absolute;
  left: 42vw;
  bottom: calc(50vh + 4vw);
  height: 16vw;
};

@media screen and (max-width: 300px) {
  .Logo {
    height: 100vh;
  };
};

Answer 1

在反应中使用钩子：

import React from "react";
import { useMediaQuery } from "react-responsive";

export default function Logo() {
  const isDesktop = useMediaQuery({
    query: '(min-aspect-ratio: 1/1)'
  });
  let logo = {};

  if (isDesktop) {
    logo = {
      position: "absolute",
      left: "42vw",
      bottom: "calc(50vh + 4vw)",
      height: "16vw"
    };
  } else {
    logo = {
      position: "absolute",
      left: "38vw",
      bottom: "calc(50vh + 6vw)",
      height: "24vw",
    };
  };

  return (
    <img 
      alt=""
      style={logo}
      src="../logo.png"
    />
  );
};

请记住通过在命令行中键入npm install react-responsive --save来下载 useMediaQuery。

Answer 2

请尝试将其添加到代码的 head 部分。

<meta name="viewport" content="width=device-width,initial-scale=1">