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...
};

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

1 个答案: