Javascript 中的媒体查询在这里不起作用答案

【问题标题】：Media queries on Javascript isnt working hereJavascript 中的媒体查询在这里不起作用
【发布时间】：2022-01-16 07:16:24
【问题描述】：

为什么@media 查询在这里不起作用？如何解决？媒体查询出了什么问题？

const Size = {
  laptop: "1024px",
  laptopL: "1440px"
}

const Device = {
  laptop: `only screen and max-width: ${Size.laptop}`,
  laptopL: `only screen and max-width: ${Size.laptopL}`,
};

const GlobalStyle = createGlobalStyle `
  body{
    background: url(${BackgroundImage}) no-repeat center center/100% 100% fixed;
  }
  @media ${Device.laptop} {
    body{
      background-size: cover;
    }
  }
`;

【问题讨论】：

你错过了createGlobalStyle后面的括号吗？
媒体查询适用于 CSS。为什么要尝试将它们放在 JS 中？
我认为这是styled-components.com
如果您要指出潜在的语法错误，请确保您熟悉标记模板文字、样式化组件或情感。 OP 的代码乍一看还不错。
你忘了用括号扭曲媒体查询！索尔 => const Device .... media only and (max-width: ...)

标签： javascript css responsive-design media-queries

【解决方案1】：

您的最大宽度和像素大小需要用圆括号括起来。试试这个：

const Device = {
  laptop: `only screen and (max-width: ${Size.laptop})`,
  laptopL: `only screen and (max-width: ${Size.laptopL})`,
};

【讨论】：