css - 使用样式组件的媒体查询中的语法问题

Question

我有一个小问题，我有 2 个范围的媒体查询没有被读取，我认为我在某处有语法错误。我会粘贴一些代码

const size = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  ipad: '768px',
  tablet: '1024px',
  laptop: '1024px',
  laptopL: '1330px',
  desktop: '2560px',
};

const device = {
  mobileS: `(max-width:${size.ipad})`,
  ipad: `(min-width: ${size.ipad} and max-width:${size.tablet})`,
  tablet: `(min-width: ${size.tablet} and max-width:${size.laptopL})`,
  desktop: `(min-width: ${size.laptopL})`,
};

export default device;

无法读取 ipad 和平板电脑屏幕，我认为这是由于我声明这 2 台设备的最小和最大宽度的方式存在语法错误。 如果有人可以帮助，请

Answer 1

试试吧。看括号:

ipad: `(min-width: ${size.ipad}) and (max-width:${size.tablet})`,
tablet: `(min-width: ${size.tablet}) and (max-width:${size.laptopL})`,