За Документация MDN по медиа-запросам , есть только несколько функций, выделенных для размера: width, height, device-width и device-height.
InВ прошлом device-width и device-heigth были доступны для медиазапросов, которые теоретически могут быть использованы для того, что вы пытаетесь сделать, но это имеет значение , так как устарело и не должно использоваться вновый код.
То есть width и height, которые принимают значение "длины".
В Документация MDN по "длине" , длины нетЕдиница, соответствующая экрану / дисплею.
Существуют «единицы абсолютной длины», которые соответствуют реальной длине, когда это возможно, или близкие приближения, если нет.Например, 1px составляет 1/96 дюйма или 1 пиксель устройства на экранах с низким разрешением.
Существуют «относительные длины шрифта», которые соответствуют размеру конкретного символа или шрифтаатрибут в текущем шрифте.Например, 1em равен текущему размеру шрифта элемента (или родительского элемента, если он указан в свойстве font-size).
Наконец, есть «длина области просмотра в процентах», котораяотносительно размера области просмотра.Хотя это иногда путают с размером экрана / дисплея, на самом деле это размер видимой части документа: части браузера, предназначенной для отображения веб-страницы.Таким образом, 1vw будет 1% ширины видимой части страницы, а 100vw будет шириной видимой части страницы.В случае iframe "viewport" - это размер iframe.Вы можете увидеть это продемонстрировано ниже:
<code style="background: yellow; display: block; width: 50vw; height: 50vh">
background: yellow;<br>
display: block;<br>
width: 50vw;<br>
height: 50vh
</code>
Вы также можете использовать проценты в других местах в CSS, но все они принимают унаследованное значение (значение родителя) и умножают его на этопроцент.То есть, если родительский элемент имеет ширину 100px, а дочерний элемент устанавливает его ширину 50%, ширина дочернего элемента преобразуется в 50px.В случае (min|max)-(width|height) в медиа-запросах нет родителя, с которым можно было бы сравнить его, но если они имитируют один, это, скорее всего, будет область просмотра, например, vw, vh и проценты при использовании html.Тем не менее, браузеры на самом деле просто полностью игнорируют проценты на (min|max)-(width|height), как можно увидеть здесь:
@media (min-width: 1%) {
* { background: yellow }
}
@media (max-width: 100%) {
* { background: red }
}
<code style="display: block">
@media (min-width: 1%) { div { background: yellow } }<br>
@media (max-width: 100%) { div { background: red } }
</code>
Есть также связанные с разрешением единицы , которые можно использовать с медиазапросами (с resolution), но они ограниченыколичество точек на длину, например dpi для точек на дюйм, а не общее количество точек на экране.
Медиа-запросы, относящиеся к размеру экрана, не были бы полезны дляоднако большинство случаев использования, так как самый большой вариант использования для (min|max)-(width|height), предназначен для различных размеров экрана , таких как телефоны, планшеты, ноутбуки и большие настольные дисплеи.Наличие max-width: 50% точки останова на 1920x1080 экране будет означать, что точка останова будет около 960px.На iPhone XS та же точка останова будет около 207px (пиксели CSS, а не пиксели устройства).Большинство людей не будут использовать браузеры в разделенном экране, и большинство (все?) Телефонов не поддерживают оконный режим или двойной разделенный экран, поэтому вы никогда не достигнете контрольных точек с высотой и шириной, заданными в процентах.И если вы не использовали проценты и элементы, которые всегда можно обернуть, вам нужно было бы указать дополнительную информацию в каждом медиазапросе, чтобы быть полезной (например, (max-width: 50%) and (min-width: 50px)).
Что это может быть полезным, это приложение, которое использует несколько окон для одного приложения.Подумайте, Photoshop или GIMP в оконном режиме, в отличие от всех панелей инструментов, находящихся в одном окне.Но даже тогда любые эффекты, вероятно, все еще достижимы с существующими медиа-запросами.
Итак, ответ на ваш вопрос заключается в том, что мы используем непроцентные длины, потому что точки останова в области просмотра никогда не будут срабатывать (область просмотра всегда равна 100%), а точки останова разрешения (например, процент от размера экрана) не существуют.Один набор доступных медиа-запросов точек останова разрешения (device-width и device-height) устарел и не должен использоваться в новом коде.
Вместо этого мы используем точки останова длины для изменения дизайна, когда видимая частьразмер страницы может быть разным, независимо от размера устройства.
Многие библиотеки используют абсолютные длины (например, px) вместо относительных единиц (например, em) из-за того, чточто большинство разработчиков проектируют на основе пикселей.Со временем произошел сдвиг в сторону относительных единиц, но переломного момента не было.
Хотя 960px довольно широко распространен, эта точка останова для настольных ПК / планшетов со временем изменилась.В течение длительного периода времени веб-сайты разрабатывались для размещения на мониторе 1024x768.С учетом полосы прокрутки и браузера (граница вокруг окна) веб-сайты часто проектировались с шириной 1000px, а позже 980px стали обычными по причинам, которые я не помню, но я не удивлюсь, если некоторые из них будут работатьСистема или браузер были с хромированной шириной и шириной полосы прокрутки, которые в сумме превышали 24px, или это могло быть связано с популярной платформой, которая использовалась в то время.Как бы то ни было, когда мобильные устройства стали более популярными, разработка сайтов для работы в сетях также стала популярной, поэтому 960px сегодня так распространено .