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

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

可以用和加入两个媒体查询条件:

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