样式化组件中的最小和最大媒体查询

Question

我有一个用于媒体尺寸的配置文件，但我不知道如何为一种媒体类型设置最小值和最大值。

我会粘贴一些代码

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

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

export default device;

我要解决的问题是为每种屏幕类型提供一个最小值和最大值，以便进行更多控制，因为我有一些错误，当我在其他组件中使用 mobileL 作为@media 时，它没有给出具体的即使我在移动屏幕上，大小调整和平板电脑属性的@media 也会使 mobileL 黯然失色 谢谢

Answer 1

and可以加入两个媒体查询条件：

const device = {
  ipad: `(min-device-width: size.ipad) and (max-device-width: size.mobileS)`,
  // etc...
};