Я очень новичок в мире медиа-запросов, и в нем ясно, что что-то фундаментальное мне не хватает в разнице между шириной и шириной устройства - кроме их очевидных возможностей таргетинга.
Я хотел бы настроить таргетинг как на обычные компьютеры, так и на устройства с одинаковыми точками останова, поэтому я просто дублировал все мои запросы минимальной и максимальной ширины на запросы min-device и max-device width. По какой-то причине, когда я добавляю копии -device, мой CSS интерпретируется по-разному на обычных компьютерах, и я не уверен, что я делаю неправильно.
Вы можете увидеть эффекты здесь (это то, что ДОЛЖНО выглядеть)
И здесь (после добавления -device-width к моим запросам мой CSS закручивается с наименьшей шириной - большее разрешение когда ширина браузера меньше, чем то, что вызывается).
Вот мои ссылки на CSS - что-то не так с моим синтаксисом?
<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">
<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">
