为什么我的媒体查询最小宽度不起作用？答案

【问题标题】：Why is my media query min-width not working?为什么我的媒体查询最小宽度不起作用？
【发布时间】：2021-12-29 23:47:16
【问题描述】：

我有一个字体大小的 h1，我想根据屏幕宽度进行调整。

const Title = styled.h1`
  font-size: 2.5rem;
  margin: 0;
  color: ${COLOR.blue};

  @media (min-width: 600px) {
    font-size: 2rem;
  }
`;

我在我的 Pixel 4a 上尝试过，并使用 USB 调试。运行 window.screen.width 显示 393，window.screen.height 显示 851。但我的字体大小是 2 rem 而不是 2.5 rem ...我试过 @media only screen and (min-width:600px) 但它也一样我做错了什么？谢谢

【问题讨论】：

可能你使用了错误的语法。你检查你的浏览器控件了吗？你使用一些像反应这样的js框架吗？如果是，请用正确的语言标记问题

标签： css media-queries responsive

【解决方案1】：

如果您希望您的 css 在600px 设备宽度或更小范围内实现，那么您需要添加

@media only screen and (max-width: 600px) { //your css }

当您在media query 中定义 min-width 时，这意味着它将在比您在media query 中提到的更大的屏幕上工作，如果您希望在比您在更小的设备中使用css 而不是在media query 中添加max-width这将适用于小型设备

【讨论】：