Css ширина окна браузера

Обновлено: 04.07.2024

Порой у разработчиков возникает необходимость ограничить ширину элемента относительно родителя, и в то же время, оставить её динамичной. Задав таким образом начальный размер с возможностью расширения при наличии доступного пространства. Например, нам нужна кнопка, которая должна иметь минимальную ширину. Именно в таких ситуациях удобно использовать свойства максимума и минимума.

В этой статье мы познакомимся с CSS-свойствами максимума и минимума для ширины и высоты, а также детально рассмотрим каждое из них и сценарии их использования.

Свойства ширины

Начать обсуждение хотелось бы со свойств, связанных с шириной. У нас есть min-width и max-width, и каждое из них крайне важно и полезно в определённых ситуациях.

Минимальная ширина (min-width)

Своство min-width предназначено для предотвращения уменьшения ширины элемента ниже заданного значения. Значением по умолчанию является auto , которое может доходить до 0 .

Чтобы продемонстрировать его, давайте рассмотрим базовый пример:

Есть кнопка с текстом, размер которого может меняться от одного до нескольких слов. Чтобы быть уверенным, что эта кнопка будет иметь минимально допустимую ширину, даже если внутри будет только одно слово, нужно использовать min-width . Минимальную ширину задали равной 100px, поэтому даже если у кнопки будет очень короткое содержимое, как, например, только слово «Done» или только иконка, она всё равно будет достаточно большой, чтобы оставаться заметной. Это особенно важно, когда вы работаете с сайтами, переведёнными на разные языки

Рассмотрим пример с арабским языком в Twitter:

В примере выше кнопка содержит слово “تم”, что на арабском значит «Готово». Из-за короткого содержимого ширина и самой кнопки стала слишком мала, поэтому я обозначил минимум, задав ей свойство min-width , что можно увидеть на изображении справа (в секции «After»).

Минимальная ширина и Padding

Хотя свойство min-width и допускает увеличение ширины кнопки при увеличении размера её содержимого, по бокам всё же следует задавать padding , чтобы гарантировать внутренний отступ от её границ. Разница приведена на рисунке ниже

Максимальная ширина (max-width)

Свойство max-width предназначено для предотвращения увеличения ширины элемента выше заданного значения. Значение по умолчанию – none .

Распространённый и простой пример использования max-width заключается в его применении к изображениям. Рассмотрим пример ниже:

Если к изображению применить свойство max-width: 100% оно останется в границах родительского элемента, даже при том, что его изначальный размер больше. Если же изображение изначально меньше родителя, данное свойство никак на него не повлияет.

Использование min-width и max-width

Если к элементу применяются оба свойства, какое из них переопределит значение другого? Другими словами, у какого свойства приоритет выше?

Если значение min-width больше, чем max-width , оно будет принято за ширину элемента. Рассмотрим следующий пример:

Исходное значение width равно 100px и в дополнение к этому заданы значения свойств min-width и max-width . В результате ширина данного элемента не будет превышать 50% ширины родительского блока

Свойства высоты

В дополнение к свойствам минимальной и максимальной ширины, есть такие же свойства для высоты

Минимальная высота (min-height)

Свойство min-height предназначено для предотвращения уменьшения высоты элемента ниже заданного значения. Значением по умолчанию является auto , которое может доходить до 0 .

Чтобы продемонстрировать его, давайте рассмотрим простой пример.

У нас есть секция с текстовым содержимым. Необходимо, чтобы она смотрелась красиво как с большим, так и с малым количеством текста

Минимальная высота задана 100px, а содержимое центрировано с помощью flexbox по горизонтали и вертикали. Что произойдёт, если содержимого станет больше? Например, будет целый абзац

Да, вы уже догадались. Высота секции увеличится, чтобы вместить больше содержимого. С помощью этого мы можем создавать гибкие компоненты, реагирующие на количество содержимого

Максимальная высота (max-height)

Свойство max-height предназначено для предотвращения увеличения высоты элемента больше заданного значения. Значением по умолчанию является none .

На следующем примере я задал max-height для содержимого. Но так как оно больше указанной области, происходит переполнение и текст выходит за границы родительского элемента

Примеры использования свойств

Рассмотрим некоторые распространённые и редкие сценарии использования свойств min-width , min-height , max-width , и max-height

Список тегов

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

Обладая такой гибкостью, тег будет хорошо выглядеть независимо от того, насколько коротким является его содержимое. Но что случится, если автор задал очень большое имя тега, а используемая им CMS (content management system) не имеет ограничений по количеству символов в теге? В этой ситуации также можно использовать max-width

С помощью max-width можно ограничить максимальную ширину определённым значением. Однако, недостаточно применения только этого свойства. Содержимое, превышающее максимальную ширину, должно быть усечено.

Кнопки

Существуют разные сценарии использования свойств минимума и максимума для кнопок, поскольку и самих вариантов компонентов кнопок также немало. Рассмотрим следующий макет:

Обратите внимание, что ширина кнопки «Get» слишком мала. Если по какой-то причине у кнопки еще и не будет текста (а только иконка), всё может стать еще хуже. В этом случае установка минимальной ширины очень важна

Обнуление минимальной ширины для Flexbox

Значение по умолчанию у свойства min-width равняется auto, что вычисляется как ноль. Когда элемент является flex-элементом, значение min-width не становится нулём. Минимальный размер flex-элемента равняется размеру его содержимого.

Согласно CSSWG:
По умолчанию, flex-элементы не становятся меньше минимального размера, необходимого их содержимому (длина самого длинного слова или элемента с фиксированным размером). Чтобы изменить это, задайте свойство min-width или min-height .

Рассмотрим следующий пример:

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

Поскольку заголовок является флекс-элементом, решение состоит в том, чтобы сбросить значение min-width и заставить его стать нулём

Вот как это должно выглядеть после исправления:

Из описания в CSSWG следует, что установка свойства overflow в значение, отличное от visible , может привести к тому, что значение min-width будет вычислено как ноль, что также решает нашу проблему без необходимости явно задавать min-width: 0 .

Обнуление минимальной высоты для Flexbox

Хотя это менее распространённая проблема по сравнению с min-width, она всё же может встретиться. Проблема связана с flex-элементами, которые не могут быть короче своего содержимого. В результате значение min-height устанавливается равным размеру контента.

Рассмотрим следующий пример:

Текст, окрашенный в красный цвет, должен быть обрезан границами контейнера. Но поскольку данный элемент является flex-элементом, его min-height равняется высоте содержимого. Чтобы предотвратить это, мы должны сбросить значение минимальной высоты. Давайте посмотрим на HTML и CSS код:

Добавление элементу min-height: 0 сбросит значение свойства и оно начнёт работать так, как ожидается
Демо

Одновременное использование min-width и max-width

Порой бывают ситуации, когда у нас есть элемент с минимальной шириной, но в то же время, максимальная ширина не задана. Это может привести к тому, что элемент станет слишком широким, хотя такое поведение не задумывалось. Рассмотрим следующий пример:

Поскольку ширина определена в пикселях, нет уверенности, что описанное выше будет работать для мобильных. Чтобы решить эту проблему, мы можем использовать проценты вместо пикселей для свойств минимума и максимума. Рассмотрим пример ниже:

Я добавил следующий CSS-код для изображений:

Контейнер для страницы

Один из наиболее полезных сценариев применения свойства max-width – для обёртки (или контейнера) страницы. Задав странице максимальную ширину, мы можем быть уверены, что пользователям будет удобно просматривать и читать содержимое

Ниже приведён пример центрированной обёртки, имеющей padding слева и справа

Максимальная ширина и единица измерения «ch»

Единица измерения ch равняется ширине символа 0 (ноль), используемого в шрифте текущего элемента. Используя её в свойстве max-width, мы можем регулировать количество символов в строке. Согласно этой статье с сайта Smashing Magazine, рекомендованная длина строки от 45 до 75 символов.

В предыдущем примере с элементом-обёрткой, мы могли извлечь пользу от использования этого символа, поскольку это элемент статьи

Анимирование элемента с неизвестной высотой

Порой мы сталкиваемся с проблемой анимирования аккордеона или мобильного меню с неизвестной высотой содержимого. В этом случае применение max-height может быть хорошим решением.

Рассмотрим следующий пример:

Когда нажимается кнопка меню, само меню должно плавно появляться сверху вниз. Сделать это без JavaScript невозможно, если только у элемента не задана фиксированная высота (а это делать не рекомендуется). Тем не менее, это возможно с помощью max-height. Идея заключается в добавлении элементу очень большой высоты, например, max-height: 20rem , которая, не будет достигнута, после чего мы можем задать шаги анимации от max-height: 0 , до max-height: 20rem

Нажмите на гамбургера, чтобы увидеть анимацию в действии

Минимальная высота для верхней секции (hero)

Как видите, я не люблю задавать элементам фиксированную высоту. Я чувствую, что поступая так, иду против концепции, согласно которой компоненты в вебе должны быть гибкими. Добавление минимальной высоты для первой секции сайта (секция «hero») полезно в ситуациях, когда добавляется очень большое содержимое (такое бывает).

Рассмотрим следующий пример, где у нас есть секция «hero» с фиксировано заданной высотой. Вроде смотрится хорошо.

Однако, когда содержимое увеличивается, оно переполняет контейнер и выходит за рамки обёртки секции. Это плохо.

Чтобы заранее избежать этой проблемы, мы можем вместо height добавить min-height . Мы поступаем именно так, по крайней мере, для того, чтобы очистить нашу совесть. Даже при том, что это может быть причиной весьма странного отображения страницы, я считаю, что подобные ситуации должны быть предотвращены в первую очередь, в системе управления контентом (CMS). После этого проблема исправлена и страница выглядит хорошо:

Проблема переполнения содержимым заключается не только в том, что оно может быть больше фиксированной высоты родителя. Это может произойти в результате уменьшения размера экрана и, как следствие, увеличения высоты текстового содержимого из-за переносов:

Если задавать не фиксированную высоту, а лишь ограничивать минимальную с помощью min-height , описанная выше проблема не произойдёт вовсе.

Модальное окно

Для компонента модального окна необходимо задавать и минимальную и максимальную ширину, следовательно, это будет работать на экранах любых размеров (от мобильных до десктопных). Это напоминает об интересной статье на CSS-Tricks, в которой рассказывается, что делать в этом случае.

Что касается меня, я предпочитаю второй способ, так как мне нужно только определить max-width: 600px . Модальное окно – это элемент div , поэтому у него уже ширина задана = 100% от родителя, правильно?

Рассмотрим приведённый ниже пример с модальным окном. Обратите внимание, как ширина становится равной 100% от ширины родителя, если в области просмотра недостаточно свободного места

Минимальная высота и липкий footer

Когда содержимое страницы недостаточно большое, футер ожидаемо не прилипнет к нижней части. Давайте рассмотрим пример, который лучше продемонстрирует это:

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

Сначала я сделал элемент body flex-контейнером, после чего установил ему минимальную высоту 100% от области просмотра.

Рекомендую ознакомиться с этой статьёй о липких футерах.
Демо

Пропорциональные размеры элемента и max-width/height

Чтобы сделать пропорциональный контейнер, который масштабируется в зависимости от размера области просмотра, однажды был представлен хак с использованием padding. Сейчас мы можем имитировать похожее поведение, комбинируя единицы измерения области просмотра и максимальную ширину/высоту.

На основе материалов статьи Miriam Suzanne, я хочу объяснить, как это работает.

У нас есть изображение с размерами 644 x 1000 пикселей. Нам нужно сделать следующее:

Соотношение сторон: height / width (высоту поделить на ширину)
Ширина контейнера: может быть фиксированной или динамической (100%)
Задайте height , равный 100% ширины области просмотра, умноженной на соотношение сторон
Задайте max-height , равный ширине контейнера, умноженной на соотношение сторон
Задайте max-width , равное ширине контейнера

HTML/Body с высотой 100%

Что делать, если нам нужно, чтобы элемент body занимал 100% высоты области просмотра? Это распространённый вопрос как в веб-сообществе в целом, так и на сайте StackOverflow в частности.

Сначала нужно задать height: 100% элементу html . Это будет гарантировать, что корневой элемент имеет высоту 100%. Затем добавляем min-height для элемента body . Причина, по которой используется именно min-height в том, что это свойство позволяет высоте элемента body быть динамичной, и подстраиваться, каким бы большим не было содержимое

Примечания

Минимальная ширина и блочные элементы

Порой мы забываем, что элемент, к которому пытаемся применить min-width , является блочным. В итоге это может сбить с толку и никак не влиять на элемент. Убедитесь, что элемент не является блочным

CSS функции сравнения

При исследовании на StackOverflow основных проблем, с которыми сталкиваются разработчики, я наткнулся на этот вопрос, в котором автор спрашивает следующее:

Реально ли сделать что-то подобное? max-width: calc(max(500px, 100% - 80px)) или может вот такое max-width: max(500px, calc(100% - 80px)))

Желаемое поведение заключается в том, чтобы удерживать ширину элемента не более 500px. Если ширина области видимости недостаточна, чтобы вместить элемент, то ширина должна быть 100% – 80px .

Что касается решения, опубликованного в ответ на вопрос, я попробовал применить его и он работает в Chrome 79 и Safari 13.0.3. Хоть это и выходит за рамки статьи, я всё же приведу здесь решение:

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

Минимальная ширина для элементов, следующих после float, в резиновых шаблонах

Фон по размеру экрана

Видео по ширине окна браузера

Сохранение пропорций блока div при изменении размера окна

Для того, чтобы такой блок был ограничен определённой высотой и шириной:

Изменить размеры YouTube по щелчку мышки

Реализация для картинок показана в предыдущей статье. Теперь для YouTube.

31 комментарий:

Космо Мизраил Горыныч NMitra, в хромиуме (у меня Яндекс.интернет) ютуб работает также, как и в мазилке. И у обоих загрузилось со второго раза х_х

Рекламный баннер занимает много места. А так реагирует правильно. Евгения В Хроме всё отлично работает) NMitra Спасибо за помощь! Алексей Куликов Здравствуйте!
Этот код только для Bloger?
Что-то на WP он у меня отображается мягко говоря не корректно! Может ему моя тема не подходит!?

Но ,все равно, спасибо за материал! NMitra Здравствуйте, это универсальный код. Возможно у вас в шаблоне уже упоминаются данные классы. Попробуйте заменить "video" и "YouTube" на какой-нибудь "video202" и "YouTube202". Алексей Куликов Очень жаль. Привлекательная подача видео и экономия пространства.

Не помогает добавление цифр в коде (переименование YouTube). И самое прикольное, что после добавления кода и обновления, видео в админке показывается корректно. а на странице перекошено. где-то код конфликтует. NMitra Так сложно сказать. Возможно есть вложение в div с display: table-cell; или display: inline-block;. Или скрипты, ограничивающие IFRAME. Евгений Бикмаев В последнее время у меня в посты блога и на страницы перестали добавляться картинки. При создании поста картинка добавляется, а после публикации в блог пост уже открывается без картинки. То же самое и с видеороликами. При открытии поста для редакции картинки нет уже и в самом поле для внесения текста поста. Это происходит уже достаточное время, и я не знаю в чём дело. Иногда даже из-за наличия картинок не сохраняется и весь пост, и в блоге открывается только заголовок. Раньше всё было нормально. Некоторое время назад то же самое было с функцией "Читать полностью", но теперь она, как видите, перестала исчезать,

а с картинками не знаю что и делать NMitra Смотрю на статью от 14 июня, картинка присутствует. Евгений Бикмаев Спасибо за отклик, я уже решил проблему. Может, вам пригодится: дело в браузере, мне через некоторое время в самом Блоггере написали, что теперь он не поддерживает Эксплорер, загрузите хром. Я загрузил в Хроме. Но потом и на Эксплорере все наладилось.
Гадко всё-таки, да? Не хотите использовать наш браузер? А на другом не пойдёт наш Блоггер))) NMitra Мда. Гугл официально заявил, что использует и разрабатывает свои проекты только под последние версии браузеров, типа они более надёжны, но чтобы так! В этом году Microsoft (bing) отвоевал часть пользователей из поиска Google. С помощью Хрома Гугол оттяпал пользователей у Яндекса (реклама на TV была исключительно о браузере, поскольку качество поиска отстаёт - языковые особенности). Словом это не наша война.

В целом с переходом на новый интерфейс много ошибок повылазило. С другой стороны, много чего внедряют, например, сейчас я вижу новую микроразметку для вновь созданных блогов. Slava Спасибо за инфу Pani Prijatnaja Что значит Блоггер не поддерживал Эксплорер. Быть такого не может. Вам просто предложили загрузить хром и правильно сделали. IE очень капризный к коду шаблона, остается таким до сих пор. Вечно нужно под IE подстраиваться, так как многие несчастные - кто по незнанию, кто не по своей воле - им пользуются.
А разработчики стараются создавать новые версии браузеров исправляя ошибки. Так внешний вид сайтов в Опере 10 отличается от вида в Опере 12. NMitra "IE очень капризный к коду шаблона" - я так не считаю. Последняя версия вполне адекватная. И в нём не больше проблем, а по моему опыту меньше, чем в Гугл Хром. Я всё чаще встречаюсь именно с косяками Хрома.

Понятно, если разрабатывать шаблон для IE 6, то тогда ваши претензии уместны. Но глупо сравнивать IE 6 с Хромом, того ещё в проекте не было.

Хром мне так совсем не импонирует - изобретает нововведения, которые никто не поддерживает, а элементарные вещи показывает криво.

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .

Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись "Дата обновления" и т.д.

Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом </style> Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)

104 комментария:

calmos спасибо NMitra Пожалуйста.
Это действительно полезная статья! Анонимный Не могу не согласится - статья действительно полезная.

Только вот как-то привык что ли к стандартной ширине блога, или просто лень заниматься (а чесно говоря надо. :) )

Спасибо за информацию, Наталия, как только руки дойдут, так сразу и возьмемся!!

Вам - букетик ромашек и еще одно спасибо!! NMitra Я тоже так сначала думала, но с увеличением занимаемой площади ресурс выглядит более выигрышно. Плюс с увеличением разрешения экрана можно разместить дополнительные рекламные блоки. Анонимный Уговорил себя и сел пробовать менять ширину блога. Не получилось. Одна из причин - не нашел подходящего для вписывания максимальной ширины 100 % кода, потом что-то похожее нашел, но основная проблема осталась - старый шаблон: увеличивается то одно, то другое, но все нормально свои места занимать не желает, вот и в этот раз новации обходят меня стороной :) и не связываются.. NMitra Со старым шаблоном ещё проще. В разделе @media указаны основные его элементы. Трудность может возникнуть при использовании цельно изображения в качестве фона, такого как в "Словечко". Nattaxa Спасибо, работает. Nattaxa Только разрешения, а не расширения. (в заголовке) NMitra Вот спасибо.)))

Из минусов я вижу трудоёмкость метода.

@ Media я использую, если нет альтернативного варианта с max-width и min-width. Например, меню сверху на данном блоге слишком широкое и на экранах с маленьким разрешением показывается в два слоя, что некрасиво. В IE можно посмотреть. Поэтому для меньших экранов монитора я уменьшаю размер букв, что выглядит следующим образом:

Уменьшите размеры окна браузера Мозилы для демонстрации. Мне нравится, что можно регулировать такие мелочи.

Не думаю, что большая часть читателей будет применять @ Media. Только малая часть из них.

body font: $(body.font);
color: $(body.text.color);
background: $(body.background);
>

body padding-left: 20px;
padding-right: 20px;
>
html body .content-outer max-width: 100%;
> temasey я поставил это после стайла, но не оч радуюсь, так и должно быть? NMitra Не туда добавили. Уберите. В шаблоне найдите строку

После неё будет код, указанный в комментарии 35. Добавляйте часть, которая следует после слова "внесите". "Внесите" не должно быть в коде. temasey ой)
я просто код не проглядел)
эмм..та че то неоч то изменения проглядываются NMitra А теперь установите нужные значения padding (отступ) и max-width (максимальная ширина). ThreeT Народ, подскажите.

body max-width: 1000px;
>
.content-outer, .content-fauxcolumn-outer, .region-inner max-width: 1000px;
>

Это должно сделать шаблон "резиновым". Далее нужно в шаблоне все текстовые элементы перевести в %. Например, заголовок h, тег p и т.п. Для фонового изображения прописать

background-size: 100% 100%;

Могу сказать, что будет не просто. Александр Кувшинников После того, как я изменил значения, "шаблон" прилип к левому краю, стали "обрубленные" полоса меню и футера. Хотелось бы сохранить первоначальное состояние: блок с контентом по центру, полосы меню и футера от края экрана до края. А вот при уменьшении пропорция сохранялась бы. NMitra margin: 0 auto; по центру выравнивает. Я предупреждала, что будет не просто. В вашем случае нужно обладать довольно приличным багажом знаний, чтобы код переделать и чтобы всё корректно отображалось, потому что шаблон не стандартный. Переделывать всегда сложнее, чем писать с чистого листа. Александр Кувшинников Спасибо! Я его и так полностью переделал практически, за исключением тех стилей, которые прописаны в файлах Google. С CSS, думаю, не очень сложно будет.
Вопрос: "резиновый" сайт и адаптивный веб-дизайн - понятия разные или одно и тоже?
Посмотрел исходники некоторых сайтов с RWD, шрифты у них прописаны в px, а вот ширина в процентах. Александр Кувшинников Как оказалось - достаточно сложно. В том плане, что если я прописываю max-width для выше указанных селекторов, длина меню и футера становится тоже равной 1000 px. А хочется, чтобы эти составляющие были на всю ширину монитора (такой дизайн). В остальном все достижимо: @media пропишу, значения шрифтов, заголовков и т.д. сменю. Несколько часов сижу и никак не могу "догнать" как растянуть на всю ширину монитора меню и подвал - от края до края.

Буду Вам очень признателен за помощь или, хотя бы, за совет в какой направлении трудиться.
P.S.: мой блог полностью построен на основе Ваших статей! Спасибо Вам!:-) NMitra Приблизительный код:

body min-width: 1000px;
>

Это значит, что и на мониторах, и на мобильниках сайт будет занимать 1000px. А нам нужно: на мониторах - 1000px, на мобильных - 400px.

У вас судя по всему
.content-outer, .content-fauxcolumn-outer, .region-inner <>

Я же приводила общий пример. Александр Кувшинников Спасибо! Работаем.
Вопрос по поводу того, как сделать адаптивными изображения находящиеся в постах, а также миниатюры на большие картинки, при клике на которые срабатывает стандартный Lightbox. Где прописывать стиль? Общий или для каждого отдельно?

Еще хотелось бы узнать ваше мнение, касаемо данного сервиса, облегчающего создание "адаптивного" шаблона. Вот еще обзорная статья.

Но можно пойти более лёгким путём. Прописывать, например для меню,
.tabs-inner <>
со своими данными. Или вместо класса меню присваивать id - он приоритетный
Александр Кувшинников Просмотрел Ваши исходники, некоторые вещи сделал по аналогии. Я не стал менять
body min-width: 1000px;
>
.content-outer, .content-fauxcolumn-outer, .region-inner min-width: 1000px;
max-width: 1000px;
_width: 1000px;
>
на max-width: 1000px, так как почитал все Ваши комментарии, там Вы рекомендуете вставить другой код (body padding-left: 20px; padding-right: 20px;>
html body .content-outer ) в раздел /* Content */, плюс ко всему всем основным разделам я прописал максимальную ширину.
Скажите, я правильно сделал?
Касаемо структуры шаблона: работать нужно с рамками блоков, такими как, например, content-outer, column-center-outer, column-left-outer и т.д.?

Я вот именно что присваивал id-шник! NMitra Этот код для стандартных шаблонов, а у вас совсем не такой.

@media (max-width: 930px) and (min-width: 470px) < /* для разрешения экрана от 470 до 930 пикселей */
aside /* боковая колонка смещается согласно расположению в HTML и меняет фон */
>

Куда вставлять:
1) между тегами <style></style>
2) в файл CSS
3) в тег link как отдельный файл CSS

В JavaScript также есть возможность понять ширину экрана/окна браузера. Понимает же в CSS благодаря конструкции

@media (max-width: 50em)

Если непонятно объяснила, отпишитесь, пожалуйста. Анонимный Здравствуйте!
Спасибо Вам за ответ.

Значит если я понял правильно то это будет выглядеть так.
То есть при 50em размер дива будет 100х100. И при экране 950em размер дива будет 1111х1111.
И зачет никаких привязок, никаких связок указаний не надо, он сам поймёт.
Если я написал что-то очень глупое. Не судите строго.
NMitra Здравствуйте,
1) нет двоеточий в height
2) нет кавычек перед/после селектором .q
3) max-width не ограничена min-width, а значит в приоритете тот, который ниже
4) 950em - это какое-то очень огромное число

Анонимный Спасибо Вам большое. За ваши ответы и за ваш замечательный сайт. Спасибо. Hive Med Здравствуйте и с наступающим! Вроде все сделал адаптивно в своем шаблне, но почему-то на практики пользы мало, т.к. это хорошо работает только в десктопном браузере если дергать окно за край. А на мобильных устройствах все равно открыватеся полная версия, например на втором айпаде в 768x1024 не работает (max-width: 800px), на андроиде на телефоне тоже (проверял в хроме под андроид и родном браузере, там в конце адреса добавляется ?m=1 и отображается десктопная версия). Опера мобайл и мини - та же история. Кто виноват, что делать? Hive Med *на практике
ps мобильный шаблон отключен (да и css я все от него удалил) NMitra Здравствуйте, спасибо!
Добавьте в head

.s5_wrap width: 1128px;
>

Простите, сайт ваш подтёрла, правила Blogger не приветствуют ссылки на сайты для взрослых FOMUVI Сейчас столкнулся с проблемой, что если медиа запрос такой размещать в css ниже основных стилей, то они не работают (не переопределяются с изменением ширины окна). А если поставить их выше основных стилей - всё отлично. Может это стоит указать в статье? NMitra Потестировала, не заметила этого.

В данном случае какие советы я могу дать? У каждого свои элементы, своя вёрстка, свои потребности. Анонимный У меня такой вопрос: а разве не надо уменьшать размер шрифта, когда уменьшается экран? Соот-но увеличивать на большом.
Без этого на большом мониторе ничего не увидишь NMitra Можно.

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

1. Экран

1.1 Размер экрана

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

1.2 Доступный размер экрана

Доступный размер экрана состоит из ширины и высоты активного экрана без панелей инструментов операционной системы.

Для доступа к доступному размеру экрана вы можете снова использовать объект window.screen:

const availScreenWidth = window . screen . availWidth ; const availScreenHeight = window . screen . availHeight ;

2. Окно

2.1 Внешний размер окна

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

Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство outerWidth и outerHeight, которые доступны непосредственно для объекта window:

2.2 Внутренний размер окна

Внутренний размер окна (он же размер области просмотра) состоит из ширины и высоты области просмотра, отображающей веб-страницу.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Объект window предоставляет необходимые свойства innerWidth и innerHeight:

Если вы хотите получить доступ к внутреннему размеру окна без полос прокрутки, вы можете использовать следующее:

const windowInnerWidth = document . documentElement . clientWidth ; const windowInnerHeight = document . documentElement . clientHeigh ;

3. Размер веб-страницы

Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.

Используйте следующее для доступа к размеру содержимого веб-страницы (включая отступы страницы, но не границы, поля или полосы прокрутки):

const pageWidth = document . documentElement . scrollWidth ; const pageHeight = document . documentElement . scrollHeight ;

Если pageHeight больше, чем внутренняя высота окна, то отображается вертикальная полоса прокрутки.

4. Заключение

Автор: Dmitri Pavlutin

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом, чтобы они подстраивались бы под ширину области просмотра, чтобы они хорошо бы выглядели на разных устройствах. Сайты всегда тестируют, уменьшая ширину браузера и наблюдая за происходящим. Но я практически никогда не сталкивался с некими указаниями по тестированию какого-то проекта, в которых сказано, что страницы исследуют путём уменьшения высоты окна браузера. Возможно, вы когда-нибудь ловили себя на такой мысли: «Надо ли проверять страницы в окнах браузера разной высоты?». Я полагаю, что делать это надо, и собираюсь убедить в этом всех, кто прочитает эту статью.

При работе над веб-сайтом не очень правильно делать некие предположения, не опираясь на реальные данные. Поэтому очень важно брать на себя ответственность по проверке сайтов в окнах браузеров разной ширины и разной высоты.

Зачем проверять страницы в окнах браузеров разной высоты?

Хороший вопрос. Прежде чем переходить к примерам и к сценариям использования таких проверок, мне хотелось бы рассказать о проблемах, которые случаются с сайтами, не приспособленными к работе в областях просмотра разной высоты. Это поможет вам лучше понять то, о чём речь пойдёт дальше.

Неправильные предположения о том, как будут пользоваться сайтом, — это один из важнейших факторов, негативно влияющих на работу веб-дизайнера. Например, неправильно будет рассчитывать на то, что сайтом будут пользоваться, разворачивая браузер на весь экран. Вместо этого нужно рассчитывать на худшее.

Предположения и реальность

Выше приведена иллюстрация моих слов. В реальности далеко не все пользователи работают с браузерами так, как предполагает дизайнер. Я сам сталкивался с сайтами, которые плохо выглядели в окнах браузеров уменьшенной высоты.

Инструменты разработчика браузера

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

Панель инструментов разработчика занимает часть окна браузера

Открытие инструментов разработчика может «поломать» дизайн сайта или пролить свет на проблемы, возможность появления которых никто не ожидал. Выделенная область рисунка представляет текущую высоту области просмотра. Если открыть инструменты разработчика, просматривая сайт на маленьком экране ноутбука, это приведёт к тому, что видимой окажется лишь небольшая область страницы.

Подумаем над одним важным вопросом: «Можно ли улучшить впечатления пользователя от работы с сайтом в то время, когда его просматривают в окне браузера небольшой высоты?». Я могу дать положительный ответ на этот вопрос. Полагаю, теории нам хватит. Давайте учиться «вертикальному» подходу к стилизации страниц.

«Вертикальный» CSS

Некоторые дизайнеры и разработчики уделяют основное внимание внешнему виду страницы, который она принимает в окнах разной ширины. При этом они отодвигают на второй план исследование поведения страницы в окнах разной высоты. А это — очень важно. Например, некто работает над дизайном страницы и ему дали инструкции относительно того, как некий компонент должен выглядеть в окнах браузера разной ширины. А как насчёт окон разной высоты?

На большом телефоне навигационные элементы заполняют доступное вертикальное пространство. На телефоне среднего размера уменьшается размер шрифта и расстояние между элементами. На маленьком телефоне вертикального пространства недостаточно для вывода всех элементов. Поэтому они размещаются в 2 колонки.

На этом рисунке показано навигационное меню, внешний вид которого подстраивается под высоту области просмотра. Цель дизайнера заключается в том, чтобы меню заполнило бы всё доступное ему пространство. На небольших экранах уменьшается размер шрифта и расстояние между элементами меню. Если же экран телефона совсем мал (например, как у iPhone 5), элементы выводятся в двух колонках. Подобные сценарии использования сайтов часто упускают из виду. В результате сайты или совсем не приспосабливают к работе на экранах разной высоты, или оптимизируют их лишь тогда, когда какой-нибудь посетитель сайта сообщит о проблеме.

В деле подстройки сайта под области просмотра разной высоты нам может помочь CSS. А именно, речь идёт о двух основных техниках:

Медиазапросы, учитывающие высоту области просмотра.
Единицы измерения, имеющие отношение к области просмотра.

Медиазапросы, учитывающие высоту области просмотра

Как вы, наверняка, уже знаете, в CSS можно использовать медиазапросы, учитывающие ширину области просмотра:

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

Единицы измерения, имеющие отношение к области просмотра

Использование единиц измерения, имеющих отношение к размерам области просмотра, может помочь в деле улучшения впечатлений пользователей от работы с сайтами. Например, с учётом высоты области просмотра можно регулировать расстояние между элементами по вертикали.

Чем выше окно браузера — тем больше расстояние между элементами

Всё это может показаться приятной мелочью, ни на что особо не влияющей, но лишь до тех пор, пока не взглянуть на подобную страницу на большом мониторе — вроде 27-дюймового дисплея iMac. Тогда окажется, что высота области просмотра слишком велика. Но у нас, к счастью, есть способ ограничить размеры margin-bottom . Сделать это можно, например, следующими способами:

С помощью медиазапросов.
С использованием CSS-функций сравнения.

Второй способ заключается в использовании CSS-функции clamp() . При подборе значений, передаваемых этой функции, мы, в данном случае, задаём минимальный размер отступа, равный 10px , максимальный — 50px , а значения, находящиеся между этими двумя, зависят от размеров окна браузера.

Если вам эта тема интересна — взгляните на мои статьи о единицах измерения, зависящих от размеров области просмотра страницы и о CSS-функциях.

Ниже мы поговорим о различных способах использования «вертикальных» медиазапросов.

Примеры и сценарии

▍Элементы страниц, накладывающиеся друг на друга при изменении высоты окна браузера

В этом примере рассматривается страница, в верхнем разделе которой имеется заголовок и иллюстрация. Высота этой части страницы составляет 100vh , что равносильно 100% высоты области просмотра.

Верхняя часть страницы высотой 100vh

Выглядит всё это очень хорошо, но лишь до тех пор, пока не уменьшится высота окна браузера. Высоты верхней части страницы не хватит для того чтобы вместить иллюстрацию и текст. В результате элементы верхней части страницы перекроют содержимое других её разделов.

Уменьшение высоты окна браузера «ломает» дизайн

Обратите внимание на то, как изображения накладываются на раздел страницы, расположенный под её верхней частью. Происходит это из-за того, что им не хватает места. Взглянем на код к этому примеру.

Рассмотрим несколько вариантов решения подобных проблем:

Можно задать изображению фиксированные размеры (свойства width и height ), а не только его ширину ( width ). Отсутствие свойства height — это одна из причин нашей проблемы.
Можно применять к верхнему разделу страницы свойство height: 100vh только в том случае, если высота области просмотра больше 700px (понятно, что конкретные значения, используемые в медиазапросе, будут зависеть от каждой конкретной ситуации).

Итак, мы решили, что «вертикальные» медиазапросы — это стабильный и полезный механизм. Но использование значения 100vh — дело рискованное, так как, если даже можно ограничить размеры изображения, может случиться так, что размеры текста ограничить не получится. Например, если текст в верхнем разделе страницы окажется длиннее, то мы столкнёмся с новым вариантом уже знакомой нам проблемы.

Текст перекрывает раздел сайта, в котором его быть не должно

Для исправления этой проблемы можно, вместо свойства height , использовать свойство min-height . При таком подходе, в том случае, если содержимое раздела окажется больше, чем он способен вместить, его размеры увеличатся и его содержимое не перекроет следующий раздел.

▍Фиксированный заголовок страницы

Нет ничего плохого в том, чтобы заголовок страницы оставался бы на одном месте при её прокрутке. Но нужно сделать так, чтобы этот заголовок имел бы фиксированную позицию только в том случае, если на экране достаточно вертикального пространства.

Фиксированный заголовок страницы

Тут показан сайт, который просматривают в ландшафтном режиме. Обратите внимание на то, что заголовок занимает слишком много вертикального пространства. Важно ли это для пользователя? В большинстве случаев — нет. Но улучшить ощущения пользователя от работы с сайтом можно, прибегнув к следующему медиазапросу:

При таком подходе в ландшафтном режиме заголовок фиксироваться не будет.

▍Скрытие элементов, которые менее важны, чем другие

Я заметил это в навигационном меню Twitter. А именно, речь идёт о комбинации «вертикальных» медиазапросов и паттерна Priority+.

Выделенные элементы будут скрыты в том случае, если им не хватит места

Когда меняется высота области просмотра, менее важные элементы (пункты меню Bookmarks и Lists ) становятся подпунктами пункта More . Это — хороший пример использования «вертикальных» медиазапросов.

А вот — мой твит, в котором анализируется применение этого подхода в Twitter.

▍Навигационные элементы и изменение высоты области просмотра

Следующий пример связан с предыдущим. Имеется вертикальная навигационная панель (боковая панель, сайдбар). Если высота области просмотра невелика — можно немного уменьшить вертикальное расстояние между навигационными элементами, что слегка улучшит внешний вид страницы.

Расстояние между элементами и высота области просмотра

Вот стили к этому примеру:

А тут можно посмотреть видео к нему.

Кроме того, можно отметить, что в подобной ситуации модификации можно подвергнуть и размер шрифта, что, при уменьшении высоты окна браузера, даст ещё больше места для элементов.

▍Верхний раздел страницы и высота области просмотра

Верхнему разделу страницы нужно некоторое свободное вертикальное пространство, дающее ему немного «воздуха». Размеры этого пространства могут зависеть от высоты области просмотра.

Чем выше страница — тем больше «воздуха».

Так выглядят стили к этому примеру:

▍Модальные компоненты

Как вы, возможно, уже знаете, от модальных компонентов ожидается, как минимум, горизонтальное выравнивание по центру. Но может понадобиться выровнять подобный элемент и по вертикали. Это возможно, но приводит к неприятностям при изменении объёмов данных, выводимых такими элементами.

Если модальный элемент содержит правильный объём данных, то выглядит он, как показано ниже, очень хорошо.

Правильный модальный элемент

Вот стили для этого элемента:

А вот если в таком же элементе нужно будет вывести больше текста — всё уже будет далеко не так хорошо. А именно, элемент заполнит экран по вертикали и пользователь не сможет прокручивать его содержимое.

Слишком высокий модальный элемент

Эта проблема возникает по следующим причинам:

У модального элемента не задана высота.
Элемент центрован по вертикали (это ускорит появление проблемы).

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

Модальный элемент, подходящий для вывода длинных текстов

Итоги

Проектируя сайты с учётом тех впечатлений, которые вызовет работа с ними у пользователей, лучше всего строить их дизайн, опираясь на ширину и высоту окна браузера. Может, кому-то покажется странным тестирование страниц в окнах разной высоты, но такое тестирование себя оправдывает. Здесь я рассказал о важности «вертикального» подхода к дизайну сайтов, о том, как проектировать страницы в расчёте на их правильный вывод в областях просмотра разной высоты, рассмотрел примеры. Надеюсь, вам всё это пригодится.

Обращаете ли вы внимание на то, как создаваемые вами веб-страницы выглядят в окнах браузера разной высоты?

Читайте также: