Min width css: min-width — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

min-width | CSS | WebReference

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

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

Табл. 1. Ширина элемента
Значения свойствШирина
min-width<width<max-widthwidth
min-width>width>max-widthmin-width
min-width>width<max-widthmin-width
min-width<width  width
min-width>width  min-width
min-width>  max-widthmin-width
min-width<  max-widthmax-width

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

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам, кроме строчных и таблиц
АнимируетсяДа

Синтаксис

min-width: <размер> | <проценты>
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>min-width</title> <style> . container { min-width: 420px; /* Минимальная ширина контейнера */ } .col1 { background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ } .col2 { background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div> <div>Колонка 1</div> <div>Колонка 2</div> </div> </body> </html>

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

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

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

Объект.style.minWidth

Спецификация

СпецификацияСтатус
CSS Intrinsic & Extrinsic Sizing Module Level 3Рабочий проект
CSS Level 2 Revision 1 (CSS 2.
1)		Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

7121711
1171
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Размеры

См. также

  • max-height
  • max-width
  • min-height
  • width
  • Адаптивный макет на флексбоксах

css властивість min-width

  • Головна
  • css
  • властивості
  • min-width

Властивість min-width використовується, щоб встановити мінімальну ширину елемента.

Це запобігає значенню властивісті width ставати меншим за значення min-width.

Значення ширини елемента розраховується в залежності від встановлених значень властивостей width, max-width і min-width.

Ширина елементу може дорівнювати значенню заданому для min-wіdth, коли значення min-wіdth більше за значення max-wіdth або width.

Значенння властивостіШирина
min-width <width<max-widthwidth
min-width>width>max-widthmin-width
min-width>width<max-widthmin-width
min-width<widthwidth
min-width>widthmin-width
min-width>max-widthmin-width
min-width<max-widthmax-width

Дані з таблиці слід розуміти так, якщо ширина елемента (width) менше за значення min-width, то ширина стане рівною значенню min-width.

Нотатка:

Властвість min-width перевизначає властивості max-width та width.

Нотатка:

Якщо вікно браузера по ширині стає менше заданої мінімальної ширини елемента, то ширина елемента залишається незмінною, а у вікні з’являється горизонтальна смуга прокрутки.

Нотатка:

Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості box-sizing). Це не стосується до значень у одиницях довжини або процентах.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

min-width: length|initial|inherit;

Властивість

min-width може отримувати 3 значення:

length

Як значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру, прийняті в CSS. Від`ємні значення не допускаються.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання:0
Наслідує:Ні
Анімується:Так
JavaScript синтаксис:object.style.minWidth=»400px»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
min-width

1.0

7. 0

1.0

1.0

7.0

Переглядач
min-width

1.0

1.0

1.0

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4

Динамічний приклад

Демонстрація роботи властивості
Приклад задання мінімальної ширини елементів.
Синтаксис властивості
p {


    min-width: 150px;


}
Додаткові посилання
height
width
min-height
max-width
max-height
 мин-ширина | CSS-трюки — CSS-трюки 
 DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
 Свойство  min-width  в  CSS  используется для установки  минимальной ширины  указанного элемента. Свойство  min-width  всегда переопределяет свойство  width  независимо от того, следует ли оно до или после свойства  width  в вашем объявлении. Авторы могут использовать любые значения длины, если они являются положительными значениями.
 .обертка {
  ширина: 100%;
  минимальная ширина: 20em; /* Будет как минимум 20em в ширину */
} 
 Проверьте эту ручку!
 Будьте внимательны, когда предполагаете, что  min-width  наследуется, так как это свойство не наследуется от других родительских элементов. Если авторы определяют ширину, используя абсолютное значение (px, pt, in, cm, mm), минимальная ширина не повлияет, так как ширина определена на неопределенный срок. Например, если значение 200px используется в качестве ширины  и длины , ваша минимальная ширина  9Значение 0006 в 100 пикселей не требуется, так как вы уже указали абсолютное значение для ширины   (т. е. 200 пикселей). Лучший способ использовать  min-width  — определить значение  width  в процентах и ​​использовать абсолютное значение для свойства  min-width , в противном случае использовать процентное значение как для  min-width , так и для  ширины.  не даст ожидаемого результата.
 Поддержка браузера 
 Chrome Safari Firefox Opera IE Android iOS
 24+ 900 65 5.1+ 18+ 12.1+ 8+ 2.1+ 3.2+
 
 высота 
  .элемент { высота: 500 пикселей; }  
 максимальная высота 
  .element { max-height: 3rem; }  
 Максимальная ширина 
  .элемент { максимальная ширина: 100%; }  
 минимальная высота 
  .element { min-height: 100vh; }  
 ширина 
  .elment { ширина: 50%; } 
 минимальная и максимальная ширина в медиа-запросах 
 html
 1 год назад
 от Naima Aftab
 Адаптивный веб-сайт называется динамическим веб-сайтом, который меняет свою структуру в зависимости от устройства, на котором он отображается. Он может изменить свое поведение в зависимости от ширины экрана, разрешения экрана, ориентации и т. д. устройства. Теперь, чтобы сделать такой сайт, разработчики используют медиа-запросы. Здесь, в этой статье, обсуждаются следующие темы.
  1.  Медиа-запрос
  2.  Точки останова CSS
  3.  Минимальная ширина
  4.  Максимальная ширина
  5.  Сочетание обоих
  6.  Когда использовать что: min-width или max-width
 Медиа-запрос 
 Медиа-запросы были введены в CSS версии 3, что позволяет пользователям создавать адаптивные веб-сайты с помощью правила @media. Это правило требует, чтобы вы указали тип носителя, такой как печать, экран, речь или все, вместе с некоторыми логическими выражениями, которые определяют определенные характеристики носителя, такие как ширина, разрешение, плотность и т. д.
 Эти запросы в основном позволяют изменять веб-макет в зависимости от типа устройства, такого как настольный компьютер, ноутбук, мобильное устройство и т. д. Здесь мы показали вам, как определить медиа-запрос.
  Синтаксис 
 Экран @media и (минимальная ширина: 420 пикселей) и (максимальная ширина: 650 пикселей)
 @rule
 Тип носителя
 Функция носителя
 9000 2 мультимедийная функция
 оператор
 оператор
 Медиа-запрос всегда начинается с правила @media и требует, чтобы вы указали тип носителя, к которому должен применяться запрос. Затем вам нужно указать тип мультимедиа экрана и использовать такие операторы, как «и», чтобы объединить такие функции мультимедиа, как минимальная или максимальная ширина.
 Медиа-запросы указываются в определенных точках, которые называются точками останова медиа-запросов. Смотрите следующий раздел, чтобы узнать о них подробнее.
 Точки останова CSS 
 Точки останова в CSS называются точками, в которых структура веб-сайта изменяется в соответствии с размером экрана типа устройства. Точки останова определяются либо на основе типа устройства, либо на основе типа контента. Ниже приведены некоторые общие точки останова.
  1.  Для мобильных устройств: от 320 до 480 пикселей
  2.  Для планшетов и iPad: от 481 до 768 пикселей
  3.  Для ноутбуков: от 769 до 1024 пикселей
  4.  Для настольных компьютеров: от 1025 до 1200 пикселей
 При чтении объяснений выше вы, должно быть, заметили, что мы использовали две медиа-функции min-width и max-width. Вам должно быть интересно, что это такое и когда их использовать. Ниже мы предоставили вам все необходимые детали.
 Min-width 
 Функция носителя min-width определяет минимальную ширину конкретного устройства. Например, в приведенном выше разделе мы указали ширину экрана в зависимости от типа устройства, например, минимальная ширина экрана мобильных устройств составляет 320 пикселей.
  Пример 
 Экран @media и (min-width: 600px) {
 p {
 размер шрифта: 16px;
 }
 }
 В приведенном выше коде мы указали, что когда минимальная ширина экрана составляет 600 пикселей или больше, размер шрифта абзаца изменится на 16 пикселей. Таким образом, любое устройство с такой шириной экрана будет отображать текст абзаца с указанным размером шрифта.
 Max-width 
 Параметр max-width media определяет максимальную ширину конкретного устройства. Например, максимальная ширина экрана мобильных устройств составляет 480 пикселей. Обратитесь к приведенному ниже примеру, чтобы понять его лучше.
  Пример 
 Экран @media и (max-width: 700px) {
 p {
 размер шрифта: 25px;
 }
 }
 В приведенном выше коде указано, что при максимальной ширине экрана 700 пикселей или меньше размер шрифта абзаца изменится на 25 пикселей. Любое устройство, отображающее эту ширину экрана, будет отображать текст абзаца с указанным размером шрифта.
 Сочетание обоих 
 Вы также можете использовать обе функции мультимедиа вместе, комбинируя их с оператором «и».
  Пример 
 P {
 font-style:bold;
 }
 Экран @media и (минимальная ширина: 600 пикселей) и (максимальная ширина: 700 пикселей) {
 p {
 стиль шрифта: курсив;
 }
 }
 В приведенном выше коде указано, что если ширина экрана находится в диапазоне от 600 до 700 пикселей, то стиль шрифта будет курсивным, в противном случае стиль шрифта будет полужирным.
 Когда что использовать: min-width или max-width 
 Если вы разрабатываете свой веб-сайт в первую очередь для небольших устройств, установите контрольные точки CSS по умолчанию с минимальной шириной и соответствующим образом настройте для больших устройств.
 Между тем, если вы разрабатываете сначала для больших устройств, используйте max-width, а затем соответствующим образом настройте для меньших устройств.
 Заключение 
 Min-width и max-width — это характеристики мультимедиа, которые соответствуют определенному типу мультимедиа, указанному в мультимедийном запросе. Минимальная ширина указывает минимальную ширину экрана конкретного устройства, в то время как функция мультимедиа максимальной ширины указывает максимальную ширину экрана конкретного устройства. Если вы сначала разрабатываете свой веб-сайт для небольших устройств, установите начальные точки останова с минимальной шириной, тогда как, если вы сначала разрабатываете дизайн для больших устройств, используйте максимальную ширину.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *