Минимальные и максимальные медиазапросы в стилизованных компонентах

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