為什么我的 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">