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

Posted 2023-03-06

【中文标题】Javascript 中的媒体查询在这里不起作用

【英文标题】：Media queries on Javascript isnt working here

【发布时间】：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: ...)

【参考方案1】：

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

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