Как делать адаптивную вёрстку по ширине и высоте?

Question

[Dmitry]

Не могу найти информации, как это лечится. В браузере нажимаем F12 и делаем адаптивную вёрстку для размера, допустим, 1920*1080. Открываем затем страницу на мониторе 1920*1080, а страница отображается так, как для более мелкого разрешения. По-другому: если открыть какой-либо сайт, например google.ru, на мониторе 1920*1080, то будет одно изображение. Если же теперь нажать F12, затем перейти в режим адаптивной вёрстки и выставить там размер 1920*1080, то размеры элементов сайта станут намного больше, как будто это вёрстка для гораздо меньшего разрешения. Вот такая конструкция:
media screen and (min-width: 1920px) /*с 1920*/
{
media screen and (min-height: 1080px) /*с 1080*/
{
далее размеры...
Отображается правильно только в режиме адаптивной вёрстки 1920*1080, а при простом отображении страницы на мониторе 1920*1080 показывается страница для меньшего размера экрана.

Comments

[ThunderCat]

подозреваю что речь идет о ноутбуке. Ну или даже на стационаре, но в настройках где-то выставлено адаптивное разрешение в браузере, чтобы типа не было мелко слишком, монитор увеличивает изображение на какой-то процент (настройки-внешний вид-масштабирование). Так же, масштабирование может быть настроено в системных настройках экрана.

[bitwheeze]

Может рамки окна браузера съедают или скроллбар, и остается не 1920, а 1900?

Вот тут можно посмотреть, как в bootstrap это сделано. Там несколько брекпоинтов, и они не под физический размер экрана, а просто сделано под большинство размеров экранов.

https://getbootstrap.com/docs/5.0/layout/breakpoints/

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

[alexalexes]

Обычно, в адаптивной верстке с медиа запросами работают исключительно шириной экрана при перекрывании стилей, которые заданы без медиа запросов по умолчанию.
Контент на страницах, как правило, уходит в бесконечность по высоте, поэтому ловить высоту экрана медиа запросами не нужно.
Редко когда бывает, что какой-то элемент нужно зафиксировать именно в видимой области экрана и сделать так, чтобы его вся видимая часть помещалась - вот тогда нужны высоты экрана в медиа. А так, у вас редко что будет с position: fixed.

[DIVSIDE]

На экране 1920х1080 никогда сайт не отобразится также. Потмоу что панель браузера занимает место, панель пуска, панель скролла и тд. По итогу получается что на сайт выделяется примерно 1900х900

[Сергей delphinpro]

DIVSIDE, ты забыл упомянуть, что у меня панель задач слева, и занимает еще около 70 пикселей.

адаптивная верстка - это искусство.

[DIVSIDE]

Сергей delphinpro, Я всегда делаю минус 150px по всем плоскостям или тупо резиновую

[Сергей delphinpro]

DIVSIDE, именно! ваша страница должна отображаться хорошо везде.
Вне зависимости от дисплея.

[Dmitry]

DIVSIDE, у меня высота окна 955 (монитора 1080). Есть ли какие-то таблицы, откуда можно узнать размеры окна браузера в зависимости от экрана и типа браузера? Или всё на глазок, как написано тупо по 150 пикселей?

[DIVSIDE]

donaire, почитай что такое 100vw или 100vh

[Александр]

DIVSIDE, Ну а почему устаревшая информация? А как же svh, lvh, dvh / svw, lvw, dvw?

[Ankhena]

donaire,

Есть ли какие-то таблицы, откуда можно узнать размеры окна браузера в зависимости от экрана и типа браузера?

Нет такой таблицы и быть не может. Десктопный браузер может быть развернут на произвольную высоту и ширину.
А также могут быть любые настройки в масштабировании системы.
И целый зоопарк мобильных устройств.

Да и не нужна она никому, потому что сайт должен прилично выглядеть при любом размере вьюпорта.

Отображается правильно только в режиме адаптивной вёрстки 1920*1080, а при простом отображении страницы на мониторе 1920*1080 показывается страница для меньшего размера экрана.

Покажите-ка скринчик вот этой странички https://www.esolutions.se/en/test

Answer 1

[Sagrana]

Потому что есть разрешение экрана в физических пикселях, а есть резрешение экрана браузера в логических пикселях. И то, что у вас экран 1920х1080 px совсем не значит, что сайт отображается на этом разрешении.
Есть куча сайтов, которые показывают эти параметры. Например, myresolutionis.ru.
А в высоте экрана надо учитывать, что на разных устройствах может быть разная высота панели инструментов, закладок и т.д.