Единицы измерения

CSS: как задавать размеры элементов на сайте

Мы тут рассказывали про размеры текста в вёрстке. Но что, если задавать размеры не только текста, но вообще всего? В CSS это делается так же легко, как и в случае с текстом.

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

.button width:75%;
max-width:600px;
min-width:300px;
padding: 15px 15px 19px 15px;
margin: 20px auto 50px auto;
>

Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:

Но так обычно не пишут, потому что много текста.

Размеры в пикселях — жёстко, но точно

Самый простой способ задать размер элемента — указать его в пикселях. Например, если нам нужна ширина элемента 100 пикселей, то можно написать:

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

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

С пикселями есть только одна проблема: так как размеры и плотность пикселей на разных экранах разные, то может получиться так:

• на экране 5-дюймового телефона с разрешением 1920 на 1080 пикселей баннер шириной 200 пикселей получит размер в 5 сантиметров;
• а на мониторе с диагональю 24 дюйма, но с тем же разрешением 1920 на 1080 те же 200 пикселей будут иметь длину 10 сантиметров.

Чтобы было нагляднее, сделаем тестовую страницу с тремя блоками одинаковой высоты, но с шириной 100 пикселей.

div < /* у блоков будет единая высота */ height: 100px; /* и становиться они будут друг за другом в один ряд */ float: left; >/* у блоков будет одинаковая ширина, но разный цвет фона */ .div1 < width: 100px; background: red; >.div2 < width: 100px; background: green; >.div3

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

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

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

В этом случае браузер сделает так:

1. Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
2. Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
3. Поделит её на 100, чтобы узнать размер одного vw в пикселях.
4. Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
5. Установит это значение в пикселях при вёрстке.
6. Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

div < /* у блоков будет единая высота */ height: 100px; /* и становиться они будут друг за другом в один ряд */ float: left; >/* задаём ширину относительно ширины экрана */ .div1 < width: 10vw; background: red; >.div2 < width: 20vw; background: green; >.div3

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

Ещё есть vmin и vmax, которые работают так:

• vmin находит минимальное значение из пары (vh, vw);
• а vmax находит максимальное значение из пары (vh, vw).

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

Проценты — очень гибко, но всегда нужен родительский элемент

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

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

Родительский элемент — тот, внутри которого находятся другие наши элементы. Например, мы хотим сделать на странице блок шириной 500 пикселей:

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

div < /* у блоков будет единая высота */ height: 100vh; /* и становиться они будут друг за другом в один ряд */ float: left; >/* задаём ширину в процентах относительно родителя */ .div1 < width: 10%; background: red; >.div2 < width: 20%; background: green; >.div3

Если мы явно не указали размер родительского элемента, то браузер постарается угадать его или посчитать самостоятельно. Но получится это не всегда.

Нужно ли в этом разбираться?

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

Источник

min-width

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

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента

Значения свойств					Ширина
min-width		width		max-width	width
min-width	>	width	>	max-width	min-width
min-width	>	width		max-width	min-width
min-width		width	width
min-width	>	width	min-width
min-width	>	max-width	min-width
min-width		max-width	max-width

Данные из таблицы следует понимать следующим образом. Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .

Синтаксис

min-width: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования min-width в браузере

Объектная модель

[window.]document.getElementById(» elementID «).style.minWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

CSS-свойства max-width, min-width, max-height и min-height: разбираем на примерах

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «CSS Properties – Max-width, Min-width, Max-height, and Min-height Explained with Examples».

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

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

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

Свойство max-width

С помощью свойства max-width можно установить максимальную ширину элемента. Это означает, что элемент может наращивать ширину, пок ане достигнет установленного предела (предел может быть как в абсолютных, так и в относительных единицах). Достигнув указанного ограничения, ширина фиксируется.

Рассмотрим пример. Представьте, что мы устанавливаем ширину элемента в 80% от зоны просмотра. Если зона просмотра — 375px, наш элемент будет иметь ширину 300px. При такой ширине качество не потеряется.

Но если зона просмотра у нас существенно больше, скажем, 1300px, ширина элемента станет 1040px.

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

Обратите внимание: размер карточки ни при каких условиях не превышает 350px. Так работает свойство max-width. Благодаря ему можно обеспечить увеличение размера карточки на маленьких экранах.

Если ширина экрана меньше 350px, карточка займет 80% от имеющейся ширины. Но если достигнута планка в 350px, ширина перестает увеличиваться.

Свойство min-width

В противоположность свойству max-width, свойство min-width определяет минимальную ширину элемента.

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

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

Здесь элемент карточки не может стать меньше, чем 250px в ширину.

Свойство max-height

Свойство max-height работает аналогично свойству max-width, но регулирует не ширину, а высоту элемента.

Здесь высота элемента фиксируется при достижении определенной высоты.

Свойство min-height

В противоположность max-height, свойство min-height позволяет установить минимальную высоту элемента.

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

Заключение

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

Источник