Относительные единицы измерения в css: Страница не найдена

Поля и отступы в процентах

Если вы установите полей и отступов в процентах, вы можете заметить некоторое странное поведение. В приведенном ниже примере у нас есть коробка. Мы задали внутреннему блоку поле в размере 10 % и отступ в размере 10 %. Отступы и поля сверху и снизу поля имеют тот же размер, что и поля слева и справа.

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

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

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

В приведенном ниже примере вы можете увидеть два поля, оба с определенным min-height 150 пикселей. Коробка слева имеет высоту 150 пикселей; поле справа содержит контент, которому нужно больше места, поэтому его высота превышает 150 пикселей.

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

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

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

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

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

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

Примечание: Узнайте больше о методах адаптивного изображения.

Область просмотра — видимая область вашей страницы в браузере, который вы используете для просмотра сайта, — также имеет размер. В CSS у нас есть единицы, которые относятся к размеру окна просмотра — vw для ширины окна просмотра и vh для высоты окна просмотра. Используя эти единицы, вы можете изменить размер относительно области просмотра пользователя.

1vh равно 1% высоты области просмотра, а 1vw равен 1% ширины области просмотра. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть коробка размером 20vh и 20vw. В коробке находится письмо A , которому присвоен размер шрифта размером 10 vh.

Если вы измените значения vh и vw , это изменит размер окна или шрифта; изменение размера области просмотра также изменит их размеры, поскольку они имеют размер относительно области просмотра. Чтобы увидеть изменение примера при изменении размера области просмотра, вам нужно будет загрузить пример в новом окне браузера, размер которого вы можете изменить (как встроенный