CSS min-height Свойство
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Установите минимальную высоту элемента
в 200 пикселей:
p.ex1
{
минимальная высота: 200 пикселей;
}
Попробуйте сами »
Определение и использование
Свойство min-height определяет минимальную высоту элемента.
Если содержимое меньше минимальной высоты, минимальная высота будет применяемый.
Если содержимое больше минимальной высоты, свойство min-height не имеет никакого эффекта.
Примечание: Это предотвращает значение
свойство height становится меньше, чем мин-высота .
Показать демо ❯
| Значение по умолчанию: | 0 |
|---|---|
| Унаследовано: | нет |
| Анимация: | да, см. индивидуальные свойства . Читать про |
| Версия: | CSS2 |
| Синтаксис JavaScript: | объект .style.minHeight=»400px» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Недвижимость | |||||
|---|---|---|---|---|---|
| минимальная высота | 1,0 | 7,0 | 3,0 | 2.0.2 | 4,0 |
Синтаксис CSS
min-height: length |initial|inherit;
Значения свойств
| Значение | Описание | Демо |
|---|---|---|
| длина | Значение по умолчанию — 0. Определяет минимальную высоту в пикселях, см и т. д. Прочтите о единицах длины | Демонстрация ❯ |
| % | Определяет минимальную высоту в процентах от содержащего блока | Демонстрация ❯ |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник по CSS: Высота и ширина CSS
Справочник по CSS: свойство max-height
Справочник по HTML DOM: свойство minHeight
❮ Назад Полное руководство по CSS Далее ❯
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебник HTMLУчебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9003 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности. Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Разница между запросами CSS только для медиа и медиаэкрана | by Rahul Oberoi
Чтобы реализовать адаптивный веб-дизайн, важно понимать медиа-запросы в CSS, особенно только медиа-запросы и медиа-экранные запросы.
Начнем с очевидного вопроса.
Что такое медиа-запрос?
Медиа-запрос — это метод, представленный в CSS3. Запрос включает использование @media Правило для запуска блока свойств CSS в случае выполнения заданного условия.
Например, приведенный ниже код предписывает, что если окно браузера имеет размер 400 пикселей или меньше, цвет фона будет светло-зеленым: -цвет: светло-зеленый;
}
}
Медиа-запросы особенно полезны при добавлении точек останова для адаптивного дизайна.
Поскольку точки останова — это, по сути, номера пикселей, при которых содержимое или дизайн отображаются для пользователей по-разному, медиа-запросы используются для определения того, какие изменения должны произойти в каких пикселях.
В приведенном ниже примере код указывает, что если размер окна браузера меньше 600 пикселей, ширина каждого столбца должна стать равной 100 %:
/* Для рабочего стола: */
.col-1 {width: 8,33%;}
.col-2 {ширина: 16,66%;}
.col-3 {ширина: 25%;}
.col-4 {ширина: 33,33%;}
.col-5 {ширина: 41,66%;}
. col-6 {ширина: 50%;}
.col-7 {ширина: 58,33%;}
.col-8 {ширина: 66,66%;}
.col-9 {ширина: 75%;}
.col- 10 {ширина: 83,33%;}
.col-11 {ширина: 91,66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 600px) {
/* Для мобильных телефонов: */
[class*=»col-«] {
ширина: 100%;
}
}
Каждый медиа-запрос состоит из необязательного медиа-типа и одного или нескольких выражений медиа-функции.
Можно комбинировать несколько медиа-запросов с логическими операторами. Все медиа-запросы чувствительны к регистру.
Каждый медиазапрос считается верным, если указанный тип медиа соответствует устройствам, на которых отображается веб-сайт. Кроме того, выражения функций мультимедиа также должны быть истинными.
Что такое запрос медиа-экрана?
Запрос @media screen просто означает, что рассматриваемый запрос предназначен для цветных экранов или устройств, поддерживающих «экранный» режим.
Давайте рассмотрим пример:
Экран @media и (max-width:500px)
Приведенный выше запрос относится к экранам с максимальной шириной 500 пикселей. Смысл этого в основном в том, чтобы указать коду различать «экран» и другие типы носителей (такие как печать, шрифт Брайля, тиснение, портативное устройство и т. д.).
Что такое запрос только для мультимедиа?
Добавляя к медиа-запросу логический оператор «только» , разработчик гарантирует, что запрос будет применяться только в том случае, если условие полностью соответствует.
Если вы не используете only, старые браузеры могут не читать или интерпретировать все выражения мультимедийных функций. Например, если запрос имеет вид
@media screen и (max-width:500px)
, старые браузеры могут интерпретировать запрос как просто экран и игнорировать количество пикселей. Это привело бы к применению условия запроса на всех экранах. Чтобы предотвратить это, вы можете использовать:
Только экран @media и (max-width:500px)
При использовании оператора only обязательно укажите тип носителя.
Значение в адаптивном дизайне
Медиа-запросы играют важную роль в реализации адаптивного веб-дизайна. Обсужденные выше запросы являются двумя наиболее часто используемыми и помогают обеспечить оптимизацию контента вашего веб-сайта для размеров и типов устройств.
После того, как вы использовали CSS-запросы на своем веб-сайте, обязательно проверьте их эффективность. Самый простой способ сделать это — использовать инструмент, который позволяет протестировать дизайн вашего веб-сайта на реальных устройствах и в реальных браузерах.