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

Question

为什么@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;
}
}
`;

Answer 1

您需要在最大宽度和像素大小周围使用圆括号。试试这个：

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