CSS-медиа запрашивает минимальную ширину и минимальную ширину устройства?

Я очень новичок в мире медиа-запросов, и ясно, что есть что-то фундаментальное, о котором я пропустил, о разнице между шириной и шириной устройства, кроме их очевидных возможностей таргетинга.

Я хотел бы настроить таргетинг как на обычные компьютеры, так и на устройства с одинаковыми точками останова, поэтому я просто дублировал все мои запросы ширины min и max на запросы min-device и max-device width. По какой-то причине, когда я добавляю копии -device, мой CSS интерпретируется по-разному на обычных компьютерах, и я не уверен, что я делаю неправильно.

Вы можете увидеть эффекты здесь (это то, что ДОЛЖНО выглядеть)

И здесь (после добавления -device-width к моим запросам мой CSS закручивается с наименьшей шириной – большие разрешения видны даже тогда, когда ширина браузера меньше, чем то, что вызывается).

Вот мои ссылки CSS – есть ли что-то не так с моим синтаксисом? :

      

Ширина устройства относится к разрешению дисплея (например, 1024 от 1024×768), а ширина относится к ширине самого браузера (который будет отличаться от разрешения, если браузер не максимизируется). Если ваше разрешение достаточно велико, чтобы вы попали в одну точку останова, но ширина браузера достаточно мала, чтобы вы попали в другую, вы получите нечетную комбинацию обоих.

Если у вас нет законных оснований для ограничения таблиц стилей на основе разрешения, а не размера windows просмотра, просто используйте min-width / max-width и избегайте max-width min-device-width / max-device-width .

  • $ (window) .width () не совпадает с запросом медиа
  • Twitter Bootstrap 3: как использовать медиа-запросы?
  • Общие запросы CSS Media Break Points
  • Должен ли я использовать max-device-width или max-width?
  • Расширение селекторов из медиа-запросов с помощью Sass
  • Что означает экран @media и (max-width: 1024px) в CSS?
  • Каковы правила совпадения запросов медиа-запросов CSS?
  • Общие точки останова для запросов СМИ на быстродействующем сайте
  • Вложенные правила @media в CSS
  • Может ли медиа-запрос изменять размер на основе элемента div вместо экрана?
  • @Media min-width & max-width
  • Давайте будем гением компьютера.