Css min width: min-width — CSS | MDN

Содержание

min-width - CSS | MDN

Свойство CSS min-width устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства width  от становления меньше, чем значение, указанное для min-width.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.

Ширина элемента принимает значение min-width когда min-width больше чем max-width или width.


min-width: 3.5em;


min-width: 10%;


min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;


min-width: inherit;
min-width: initial;
min-width: unset;

Значения

<length>
Минимальная ширина выражается как
<length>
. Отрицательные значения делают свойство недействительным.
<percentage>
Минимальная ширина выражается как <percentage> от ширины родительского блока. Отрицательные значения делают свойство недействительным.
Значения-ключевые слова
auto
Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя предпочтительная ширина.
min-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя минимальная ширина.
fill-availableЭто экспериментальное API, которое не должно использоваться в рабочем коде.
Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова.,
available
.)
fit-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Определяет как min(max-content, max(min-content, fill-available)).

Формальный синтаксис

table { min-width: 75%; }

form { min-width: 0; }

BCD tables only load in the browser

CSS min-width



Пример

Установите минимальную ширину элемента <span> на 500 пикселей:

span.ex1 {
    min-width: 500px;
}


Определение и использование

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

Если содержимое меньше минимальной ширины, будет применена минимальная ширина.

Если содержимое больше минимальной ширины, свойство min-width не имеет эффекта.

Примечание: Это предотвращает значение свойства Width, которое становится меньше min-width.

Значение по умолчанию: 0
Inherited: no
Animatable: yes, see individual properties
. Читайте о animatable
Version: CSS2
Синтаксис JavaScript: object.style.minWidth="400px"

Поддержка браузера

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

Свойство
min-width 1. 0 7.0 1.0 2.0.2 4.0


Синтаксис CSS

min-width: length|initial|inherit;

Значения свойств

Значение Описание
length Значение по умолчанию — 0. Определяет минимальную ширину в пикселах, см и т. д. читать о единицах длины
% Определяет минимальную ширину в процентах от содержащего блока
initial Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit Наследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Height and Width

CSS Справка: max-width Свойство

HTML DOM Справочник: minWidth Свойство


min-width | CSS справочник

Поддержка браузерами

12.0+ 7.0+ 1.0+ 1.0+ 4.0+ 2.0.2+

Описание

CSS свойство min-width устанавливает минимальную ширину области для содержимого элемента.

Примите во внимание, что минимальная ширина элемента вычисляется по формуле:
min-width+padding(левый и правый)+border(ширина рамки)
т.е. если вы зададите min-width: 500px, padding: 5px, border 1px, то минимальная ширина получится 512px.

Примечание: CSS свойство min-width работает только с блочными элементами.

Значение по умолчанию: 0
Применяется: ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
Версия: CSS2
Синтаксис JavaScript: object. style.minWidth="10px"

Синтаксис

min-width: величина|%|inherit;

Значения свойства

Значение Описание
величина Определяет минимальную ширину в единицах измерения CSS.
% Минимальная ширина указывается в процентах и высчитывается в зависимости от ширины родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p {
      min-width: 500px;
      background-color: yellow;
    }
  </style>
</head>
<body>

  <p>Минимальная ширина элемента 500px.</p>

</body>
</html>

Результат данного примера в окне браузера:

width | HTML и CSS с примерами кода

Свойство min-width устанавливает минимальную ширину элемента.

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

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

.

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

Блоки

Синтаксис

/* <length> value */
min-width: 3.5em;

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Значения

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

auto Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.

max-content Внутренняя предпочтительная ширина.

min-content Внутренняя минимальная ширина.

fill-available Ширина родительского блока минус горизонтальные margin

, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available.)

fit-content Определяет как min(max-content, max(min-content, fill-available)).

Значение по-умолчанию:

Применяется ко всем элементам, кроме строчных и таблиц

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

Поддержка браузерами

Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.

Описание и примеры

<!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>

Выбираем медиа-запросы: min-width CSS или max-width CSS

Мне часто задают вопросы вроде: «Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая».

Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей. При анализе стилей подобных сайтов чаще всего встречается CSS media max width.

Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек (breakpoints). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS, то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.

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

.content {
  width: 60%;
}

.related {
  width: 40%;
}

@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

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

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }

  .related {
    width: 40%;
  }
}

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

Есть несколько причин использования в  min width CSS и max width CSS:

  • Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width, но только временно;
  • Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
  • Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript.

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

Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

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

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

Вкратце: позвольте стандартному состоянию элементов помочь вам определить, какой медиа-запрос использовать.

Данная публикация является переводом статьи «Choosing between min-width and max-width media queries» , подготовленная редакцией проекта.

Ключевые слова min-content, max-content, fit-content, stretch в CSS

В CSS имеются некоторые ключевые слова, представляющие значения размера (ширина или высота) элемента. В данной статье я объясню как они работают.

  • min-content
  • max-content
  • fit-content
  • stretch

Example

width: max-content;
width: min-content;
width: fit-content;
width: stretch;

max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: stretch;

min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: stretch;

height: max-content;
height: min-content;
height: fit-content;
height: stretch;

......

Примечание: Ключевые слова выше работают только с блочными элементами (block element) или inline-block элемент (inline-block element), это гарантирует то, что элементы будут отображены в виде прямоугольника (С шириной и высотой).

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

min-content-h-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>

         .my-element  {
            display: inline-block;
            border: 1px solid gray;
            background-color: SeaShell;
            padding: 5px;
            margin: 15px 35px 0px 0px;
         }
      </style>
   </head>
   <body>
      <h3>Horizontal 'min-content' value?</h3>

       <div>
           This is text content of element.
       </div>

       <div>
           This is text content of element.
       </div>

       <div>
           This is text content of element.
       </div>
   </body>
</html>
 

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

min-content-v-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>
         .my-element  {
            border: 1px solid gray;
            padding: 5px;
            margin-bottom: 25px;
            background-color: SeaShell;
         }
      </style>
   </head>
   <body>
      <h3>Vertical 'min-content' value?</h3>

       <div>
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>

       <div>
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>

       <div>
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>
   </body>
</html>

max-content это ключевое слово, представляющее значение, предпочитаемая внутренняя ширина (intrinsic) элемента или предпочитаемая внутренняя высота элемента.

Как расчитывается значение 

max-content по горизонтали?

width: max-content;
min-width: max-content;
max-width: max-content;

Предположим вы делаете родительский элемент с бесконечной (или очень большой) шириной и текущий элемент с минимальной высотой (без вертикального переполнения содержания элемента). Тогда значение max-content и есть минимальная ширина без переполнения содержания по горизонтали.

Как расчитывается значение 

max-content по вертикали?

height: max-content;
min-height: max-content;
max-height: max-content;

Предположим вы делаете родительский элемент с бесконечной (или очень большой) высотой и текущий элемент с минимальной шириной (без горизонтального переполнения содержания элемента). Тогда значение max-content и есть минимальная высота, без вертикального переполнения содержания.

По умолчанию элементы пишут их содержание по: "горизотали, с верху вниз" (Horizontal, Top to Bottom) - CSS {writing-mode:horizontal-tb}. В данном случае, ключевое слово fit-content имеет значение только по горизонтали.

.element  {
  width: -moz-fit-content;  /** OLD Firefox */
  width: fit-content;
}

Если режим написания (Writing mode) горизонтальный, элемент настроенный CSS {width: fit-content} значит:

  1. Если родительский элемент может предоставить текущему элементу значение ширины больше чем max-content, то fit-content = max-content.
  2. Если родительский элемент не может предоставить текущему элементу значение ширины больше чем min-content, то fit-content = min-content.
  3. Если родительский элемент может предоставить текущему элементу значение ширины только в диапазоне (min-content, max-content), текущий элемент будет иметь ширину "подходящую" (fit) к родительскому элементу.

Ключевое слово fit-content будет иметь значение по вертикали, если режим написания (writing mode) находится по вертикали, то есть:

.element {
    writing-mode: vertical-rl | vertical-lr;
    width: fit-content;
}

width | HTML и CSS с примерами кода

Свойство max-width устанавливает максимальную ширину элемента.

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

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

Блоки

Синтаксис

/* <length> value */
max-width: 3. 5em;

/* <percentage> value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;

Значения

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

none
Отменяет действие этого свойства.

Значение по-умолчанию:

Применяется ко всем элементам, кроме строчных и таблиц

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

Поддержка браузерами

Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Версия сайта для мобильных устройств</title>
    <style media="only screen and (max-device-width:480px)">
      body {
        max-width: 480px; /* Максимальная ширина страницы в пикселях */
      }
    </style>
  </head>
  <body>
    <h2>Текст заголовка</h2>
    <p>Текст примера</p>
  </body>
</html>
Минимальная ширина

· Документы WebPlatform

Сводка

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

Обзорная таблица

Начальное значение
0
Относится к
все элементы, кроме незамещенных встроенных элементов, таблиц, встроенных таблиц, ячеек таблиц, столбцов таблицы и групп столбцов
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
указанный процент или абсолютная длина, или «нет»
Анимационный
Да
Свойство объектной модели CSS
мин. ширина
В процентах
да

Синтаксис

  • min-width: calc ()
  • min-width: заполнение доступно
  • min-width: fit-content
  • min-width: наследовать
  • мин-ширина: длина
  • min-width: max-content
  • min-width: min-content
  • Мин. Ширина: нет
  • min-width: в процентах

Значения

длина
Задает фиксированную ширину.Отрицательные значения не допускаются. Смотрите длину для возможных единиц.
процентов
<процент> относительно ширины содержащего блока. Если у содержащего блока ширина явно не задана, то он считается нулевым. Отрицательные значения не допускаются.
расчет ()
Подробнее о режиме см. В функции css calc.
наследовать
Принимает то же указанное значение, что и свойство родительского элемента.
нет
По умолчанию.Очищает значение минимальной ширины. Свойство width может иметь любое значение.
максимальное содержание
Максимально узкое пространство, которое коробка могла бы занять при размещении вокруг своего содержимого, если бы не использовалась ни одна из возможностей мягкой упаковки внутри коробки (пробелы / знаки препинания в тексте являются примерами возможности мягкой упаковки). Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.
мин-содержание
Самая узкая мера, которую может принять блок, не приводящая к переполнению встроенного измерения, чего можно было бы избежать, выбрав более крупную меру.Грубо говоря, размер, который уместился бы вокруг его содержимого, если бы были использованы все возможности мягкой упаковки внутри коробки. Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.
заполнение доступно
Заполнить все доступное пространство из содержащего блока (ширина минус вертикальное поле, граница и отступ содержащего блока). Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.
fit-content
Если общее доступное пространство конечно, равно min (max-content, max (min-content, fill-available)).В противном случае равняется мере max-content. Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.

Примеры

Используйте min-width с любым селектором CSS, чтобы применить его.

  / * Ограничить все элементы div минимальной шириной 100 пикселей * /
div {минимальная ширина: 100 пикселей}
  

Ограничьте ширину элемента div , используя атрибуты min-width и max-width .

  <стиль>

.ширина {
    ширина: 50%;
    фон: #eee;
}


.minwidth {
    ширина: 50%;
    минимальная ширина: 600 пикселей;
    фон: светло-голубой;
}


.Максимальная ширина {
    ширина: 50%;
    максимальная ширина: 200 пикселей;
    фон: светло-зеленый
}


.содержание {
    граница: 1px solid # c00;
    отступ: 5 пикселей;
}


Измените размер окна для увеличения и уменьшите ширину div с максимальной до минимальной

Этот div также имеет ширину 50%.

Обратите внимание, что высота div увеличивается, чтобы приспособиться к потоку текста.

Этот div также имеет ширину 50%.

Он также имеет минимальную ширину 600 пикселей.

Этот div также имеет ширину 50%.

Он также имеет максимальную ширину 200 пикселей.

Посмотреть живой пример

Использование

  Минимальная ширина CSS хорошо поддерживается большинством браузеров. Несколько вещей, которые следует учитывать при использовании:
  
  • min-width переопределяет максимальную ширину. Если предоставленная минимальная ширина больше, чем максимальная ширина, максимальная ширина не имеет значения.
  • max-content, min-content, fit-content и fill-available находятся на стадии черновика W3C и поддерживаются не во всех браузерах.
  • Поддержка calc лучше во всех браузерах. Могут потребоваться префиксы поставщиков.

Банкноты

Замечания

Атрибуты min-width / max-width применяются к плавающим и абсолютно позиционированным блочным элементам и встроенным блочным элементам, а также к некоторым внутренним элементам управления. Они не применяются к незамещенным встроенным элементам, таким как строки таблицы и группы строк / столбцов.(«Замещенный» элемент имеет внутренние размеры, такие как img или textArea .) Это свойство доступно только при строгом! DOCTYPE.

Связанные спецификации

CSS 2.1 (Раздел 10.4)
Рекомендация W3C
Модуль определения внутренних и внешних размеров CSS, уровень 3
Осадка рабочий

См. Также

Статьи по теме

Модель коробки

Связанные страницы

Атрибуции

Разница между свойством CSS width, min-width и max-width

Фотография на обложке сделана Маркусом Списке на Unsplash.

CSS

имеет три свойства, связанных с шириной:

  • ширина
  • Мин. Ширина
  • макс.ширина

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

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

Сначала мы подробно обсудим свойства с наглядными примерами. Затем мы обсудим их сходства и различия.

Давайте нырнем.


Ширина свойство

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

Свойство принимает в качестве значений комбинацию из чисел и допустимых единиц измерения CSS.

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax и т. д.
 * /
.selector {
    ширина: 30em; / * Занимаем 30em родительского контейнера * /
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство min-width

Это свойство, как следует из названия, определяет минимальную ширину элемента уровня блока (или изображения) при визуализации в браузере.Это означает, что если дочерний элемент имеет минимальную ширину , например 0.1em элемент будет занимать всю ширину родительского элемента. У него особый случай использования, о котором мы поговорим позже.

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

Подобно свойству width , оно принимает в качестве значений комбинацию чисел и допустимых единиц измерения CSS.

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax e.t.c.
 * /
.selector {
    минимальная ширина: 30em; / * Занимаем не менее 30em родительского контейнера * /
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство max-width

Свойство max-width определяет максимальную ширину элемента уровня блока (или изображения) при отображении на экране браузером.

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

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

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax и т. д.
 * /
.selector {
    максимальная ширина: 30em; / * Занять не более 30em родительского контейнера * /
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

На изображении ниже дочерний элемент имеет значение max-width , равное 30em .В этом окне просмотра он ведет себя так же, как свойство width при сравнении.

Теперь давайте обсудим их сходства и различия.

Сходства и различия между шириной , минимальной шириной и максимальной шириной

Сходства

Все три объекта недвижимости похожи в следующем:

  • Они определяют ширину элемента.
  • Они принимают числа и допустимые единицы измерения CSS в качестве значений.
  • Работа с элементами уровня блока или любыми элементами, имеющими свойство display , отличное от inline . Изображение - исключение.

Различия

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

  • Размер
  • Медиа-запросы для адаптивного веб-дизайна
  • Адаптивные изображения

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

ширина размер

Размер фиксированный. Следовательно, дочерний элемент, имеющий ширину 30em , будет одинаковым независимо от области просмотра браузера.

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

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

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

Но когда мы уменьшаем ширину до 10em , мы получаем следующий результат:

мин.ширина размер

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

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

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

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

макс.ширина размер

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

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

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

Когда max-width уменьшается до 10em в этом окне просмотра, он будет вести себя как свойство width .

Медиа-запросы для адаптивного веб-дизайна

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

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

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

Это минимальная ширина . Сможете угадать, какую собственность мы будем использовать? Это свойство min-width . Минимальная ширина , при которой конструкция нарушается, предоставляется как значение для свойства min-width . Это значение увеличивается каждый раз, когда дизайн ломается, и дизайнерам необходимо изменить макет дизайна.

Этот подход является рекомендуемой практикой под названием дизайн для контента, а не разрешение устройства .

  @media screen and (min-width: 48em) {/ * Обратите внимание на свойство min-width * /
    / **
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с как минимум
     * 48em. Предполагая, что размер шрифта по умолчанию составляет 16 пикселей,
     * это будет 48 * 16 = 768 пикселей.  768 пикселей - это минимум
     * ширина устройства iPad (по состоянию на август 2020 г.).
     * /
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

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

  @media screen and (max-width: 48em) {/ * Обратите внимание на свойство max-width * /
    / **
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с не более
     * 48em, т.е. размер экрана 768 пикселей и ниже.
     * Предполагается, что размер шрифта по умолчанию составляет 16 пикселей.
     * /
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство width не является подходящим кандидатом для изменения содержимого при выполнении адаптивного веб-дизайна.

Адаптивные изображения

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

Теперь вопрос: как сделать изображения адаптивными?

Ответ прост: max-width . Этим это свойство отличается от своих аналогов i.е. ширина и минимальная ширина .

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

  .image-selector {
    ширина: 100%;
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Рекомендуется использовать свойство max-width .

  .image-selector {
    максимальная ширина: 100%; / * Никогда не превышайте родительский контейнер. * /
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

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

Эти различия приведены в следующей таблице.

Отличия ширина мин.ширина макс.ширина
Размер Исправлено.Следовательно, дочерний элемент, имеющий ширину 45% , 45em или другие значения свойства width , будет одинаковым независимо от области просмотра браузера. В нижнем окне просмотра ширина дочернего элемента будет равна ширине родительского контейнера. По мере того, как область просмотра становится меньше, это может вызвать переполнение области просмотра браузера или родительского контейнера. Значение свойства min-width позволит дочернему элементу занимать всю ширину своего родительского контейнера, если значение достаточно велико и браузер находится в большем окне просмотра.В более низком окне просмотра это вызовет переполнение в окне просмотра браузера, но когда значение min-width меньше, чем окно просмотра, тогда ширина дочернего элемента будет равна ширине родительского элемента. В большинстве случаев дочерний элемент, имеющий свойство max-width , будет вести себя как свойство width , но при уменьшении окна просмотра браузера вы увидите разницу в размере по сравнению с шириной и в определенном окне просмотра. size ширина дочернего элемента будет равна ширине родительского элемента.
Медиа-запросы для адаптивного веб-дизайна Не хорошо Очень хорошо Хорошо
Адаптивные изображения Хорошо Не хорошо Очень хорошо ( настоятельно рекомендуется )

Заключение

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

Если будут вопросы, буду рад ответить на них в комментариях.

мин-ширина | Codrops

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

Иногда полезно ограничить ширину элемента в CSS определенным диапазоном. Для установки минимальной и максимальной ширины элемента доступны два свойства: свойство min-width и свойство max-width .

Свойство min-width переопределяет свойства width и max-width и не позволяет значению свойства width становиться меньше заданного значения.

Официальный синтаксис

Заметки

В CSS3 в свойство min-width были введены новые значения. Официальный синтаксис выглядит следующим образом:

  min-width: [[ | <процент>] && [граница | content-box]? ] | в наличии | мин-контент | max-content | fit-content  

Значения

<длина>
Задает фиксированную минимальную вычисляемую ширину.См. Запись для получения списка возможных значений.
<процент>
<Процент> рассчитывается относительно ширины содержащего блока. Если ширина содержащего блока отрицательная, используемое значение равно нулю. Если ширина содержащего блока зависит от ширины этого элемента, то результирующий макет не определен в CSS 2.1.

См. Запись <процент> для списка возможных значений.

наследовать
Элемент наследует минимальное значение ширины от своего родителя.

Следующие экспериментальные значения ключевых слов были введены в CSS3.

в наличии
Ширина равна ширине содержащего блока за вычетом полей, границ и отступов текущего элемента.
максимальное содержание
Внутренняя предпочтительная ширина. max-content width - это, грубо говоря, ширина содержимого, которое было бы, если бы не были вставлены «мягкие» разрывы строк, т.е. если каждый парагаф представляет собой одну длинную строку.
мин-содержание
Собственная минимальная ширина. Ширина min-content , грубо говоря, является самой узкой, которую можно получить, разорвав все линии во всех возможных точках разрыва.

Следующее изображение помогает понять значения min-content и max-content .

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

Подробнее о min-content и max-content :

Значение min-content является самым узким, которое может быть получено в поле , если разорвать все строки во всех возможных точках разрыва. На изображении выше мы видели, как текстовое содержимое может влиять на ширину контейнера с min-content . Та же концепция применима, если у вас есть изображение внутри элемента. Элемент является встроенным, поэтому после него также возможна точка останова. Итак, если элемент содержал кусок текста и изображение, изображение с большей вероятностью будет шире, чем любое слово внутри абзаца (если, конечно, вы не используете какие-то необычные и сверхдлинные слова), поэтому изображение может быть содержимым, которое определяет минимальную ширину элемента с min-content .

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

Посмотреть эту демонстрацию на игровой площадке Codrops

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

Посмотреть эту демонстрацию на игровой площадке Codrops
fit-content
То же, что и min-content .

Банкноты

Отрицательные значения не допускаются.

На значения ключевых слов (в отличие от значений длины и процента) не влияет свойство box-sizing, они всегда устанавливают размер поля содержимого.

Доступно , max-content , min-content и fit-content эквивалентны 0 при установке на min-width вертикальных элементов (когда режим письма вертикальный, т.е.е. свойство Writing-mode имеет значение vertical-rl или vertical-lr ).

Примеры

минимальная ширина: 250 пикселей;
минимальная ширина: 50%;
минимальная ширина: 100vh;
минимальная ширина: наследовать;
                 

Поддержка браузера

Свойство min-width работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.

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

* обозначает обязательный префикс.

  • Поддерживается:
  • Да
  • Нет
  • Частично
  • Polyfill

Статистика с caniuse.com

Банкноты

CSS 2.1 явно оставляет поведение min-width с

undefined, поэтому оно по-прежнему поддерживается не всеми браузерами.

CSS свойство минимальной ширины


Пример

Установите минимальную ширину элемента

:

п {
минимальная ширина: 150 пикселей;
}

Попробуй сам "

Определение и использование

Свойство min-width используется для установки минимальной ширины элемента.

Это препятствует тому, чтобы значение свойства width стало меньше, чем минимальная ширина.

Примечание: Значение свойства min-width имеет приоритет над обоими max-width и ширина.

Значение по умолчанию: 0
Унаследовано:
Анимация: да, см. Отдельные свойства . Читать about animatable Попытайся
Версия: CSS2
Синтаксис JavaScript: объект .style.minWidth = "400 пикселей" Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
мин. Ширина 1,0 12,0 7,0 1.0 2.0.2 4,0

Синтаксис CSS

минимальная ширина: длина | начальная | наследование;

Стоимость недвижимости

Значение Описание Играй
длина Значение по умолчанию - 0. Определяет минимальную ширину в пикселях, см и т. Д. Играй »
% Определяет минимальную ширину в процентах от содержащего блока Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальные Играй »
наследовать Наследует это свойство от своего родительского элемента. Читать о наследовать

Связанные страницы

Учебник

CSS: CSS Dimension

Ссылка CSS: свойство max-width

Ссылка

HTML DOM: minWidth свойство


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

CSS - javatpoint

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

Применяется, когда размер содержимого меньше минимальной ширины; в противном случае, если содержимое больше, это свойство не действует. Это свойство гарантирует, что значение свойства CSS width не может быть меньше значения свойства min-width . Не допускает отрицательных значений.

Синтаксис

минимальная ширина: нет | длина | начальная | наследовать;

Значения этого свойства CSS определены следующим образом:

нет: Это значение по умолчанию, которое не ограничивает ширину поля содержимого.

length: Это значение определяет длину min-width в пикселях, см, pt и т. Д.

начальное: Устанавливает для свойства значение по умолчанию.

inherit: Наследует свойство от своего родительского элемента.

Теперь давайте посмотрим на пример использования этого свойства CSS.

Пример

В этом примере есть четыре элемента абзаца с содержимым. Мы определяем минимальную ширину этих абзацев, используя значение длины свойства min-width .Минимальная ширина первого абзаца - 425px , второго абзаца - 22em , третьего абзаца - 220pt , а минимальная ширина четвертого абзаца - , начальная .

<название> min-width свойство <стиль> п{ граница: сплошной синий 4px; цвет фона: светло-голубой; дисплей: встроенный блок; } #px { минимальная ширина: 425 пикселей; } #em { минимальная ширина: 22em; } #pt { минимальная ширина: 220pt; } #см { минимальная ширина: начальная; }

минимальная ширина: 425 пикселей;

Привет, добро пожаловать в javaTpoint.com.

минимальная ширина: 22em;

Привет, добро пожаловать на javaTpoint.com.

min-width: 220pt;

Привет, добро пожаловать на javaTpoint.com.

минимальная ширина: начальная;

Привет, добро пожаловать на javaTpoint.com.

Проверить это сейчас

Выход


Разница между шириной и гибкостью

Это, безусловно, самый распространенный вопрос о гибкости, который мне задают.На самом деле, я помню, как сам гуглил именно об этом, когда еще только гадал с помощью flexbox. Проверяя свою историю поиска в Google, похоже, что в прошлом году я искал вариант «гибкая основа против ширины против минимальной ширины» 4 раза. Поговорим о расслаблении! Давайте ответим на этот вопрос сегодня и, надеюсь, избавим вас от поисков в будущем.

Вот формула, которую следует запомнить:

content -> width -> flex-base (limited by max | min-width)

Для определения размера гибкого элемента финальная гибкая основа связана с минимальной шириной а max-width - , все что имеет значение - .

ПРИМЕЧАНИЕ. Спецификация flexbox называет это «гипотетическим основным размером», но гораздо проще думать о нем как об окончательной гибкой основе.

Если не указано flex-base , тогда гибкая основа возвращается к свойству width элемента.

Если ширина не указана, тогда гибкая основа возвращается к вычисленной ширине содержимого элемента.

Давайте проиллюстрируем эту формулу, поместив несколько гибких элементов в гибкий контейнер размером 1000 пикселей:

  контейнер {
  дисплей: гибкий;
  ширина: 1000 пикселей;
}
  

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

  шт. {
  ширина: 200 пикселей;
  высота: 200 пикселей;
}
  

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

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

Пока что установка ширины эквивалентна установке flex-base .

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

  шт. {
  ширина: 30 пикселей;
  гибкая основа: 250 пикселей;
}
  

Как вы можете видеть, когда указывается flex-base , ширина наших боксов игнорируется, поэтому нам даже не нужно его указывать:

  item {
  гибкая основа: 250 пикселей;
}
  

Наша последняя гибкая основа для каждого элемента составляет 250 пикселей. И поскольку у нас достаточно места для всего этого, они прекрасно впишутся в свой гибкий контейнер:

Запомните формулу гибких элементов:

content -> width -> flex-base (limited by max | min-width)

Единственное, что имеет значение, - это финальный флекс-базис.Лучшая практика - просто использовать гибкую основу вместо ширины или высоты. Тем более, что в Safari все еще есть старая ошибка flexbox, из-за которой он не может правильно применять гибкую усадку к элементам, которые используют высоту вместо flex-base .

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

  item {
  гибкая основа: 250 пикселей;
  максимальная ширина: 100 пикселей;
}
  

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

Теперь давайте установим минимальную ширину и посмотрим, как это ограничивает нашу последнюю гибкую основу :

  шт. {
  гибкая основа: 100 пикселей;
  минимальная ширина: 250 пикселей;
}
  

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

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

Вы, наверное, заметили, что на всех наших иллюстрациях мы визуализировали размер гибких элементов до того, как были помещены в гибкий контейнер. Мы сделали это, потому что это именно то, чем является flex-base : размер гибких элементов до того, как они будут помещены в гибкий контейнер . Это идеального размера или гипотетического размера элементов. Но flex-base - это не гарантированный размер ! Как только браузер помещает элементы в свой гибкий контейнер, все меняется.В некоторых из приведенных выше примеров вы видели, что гибкие элементы идеально вписываются в их гибкий контейнер, потому что общая сумма всех окончательных гибких базовых элементов была точной шириной нашего контейнера (1000 пикселей). Это здорово, когда это происходит, но часто гибкому контейнеру не хватает места или будет дополнительное пространство после того, как все его значения flex-base складываются.

Допустим, мы хотели поместить еще больше из этих flex-base: 200px элементов в наш контейнер:

Перед входом в контейнер каждый из них занимал бы 200 пикселей, или всего 1600 пикселей.Но в нашем контейнере доступно только 1000 пикселей. Когда не хватает места для всех элементов на гибкой основе (200 пикселей каждый), тогда гибкие элементы по умолчанию будут сжиматься на на , чтобы соответствовать:

Все элементы начинались с ширины 200 пикселей, но поскольку у нас не хватало пространство они сжимались с одинаковой скоростью, пока все не умещались (125 пикселей каждое). Степень усадки и есть соотношение гибкости и усадки . Вы можете переопределить значение по умолчанию, чтобы определенные элементы сжимались быстрее (более высокий коэффициент) или медленнее (более низкий коэффициент) или вообще не сжимались (0).

Часто у нас остается много места после того, как складывается последний гибкий базис всех элементов .

  шт. {
  гибкая основа: 100 пикселей;
}
  

Мы можем проинструктировать наши гибкие элементы расти, чтобы заполнить доступное пространство после их помещения в гибкий контейнер. В этом суть свойства flex-grow . Значение по умолчанию - 0 , то есть не увеличиваться. Давайте установим для каждого элемента значение flex-grow: 1 (все растут с одинаковой скоростью), чтобы заполнить оставшееся пространство:

  item {
  гибкая основа: 100 пикселей;
  flex-grow: 1;
}
  

Рост и сжатие - огромная часть крутости flexbox, и это то, что делает его таким отличным инструментом для адаптивного дизайна пользовательского интерфейса.Обучающая игра Flexbox Zombies более подробно описывает flex-shrink и flex-grow .

Надеюсь, теперь вы видите разницу между шириной и гибкой основой и тем, как min-width и max-width влияют на окончательную гибкую основу. Все вышеперечисленное применимо к height , когда ваш flex-direction - это column или column-reverse . Если вы хотите раз и навсегда освоить все возможности Flexbox, я настоятельно рекомендую подписаться на бесплатную обучающую игру Flexbox Zombies.Удачного флексбоксинга!

Мин. Ширина, максимальная ширина и запросы мультимедиа | by Banuri Wickramarathna

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

Синтаксис

@media media-type и (media-feature) {

}

Media types

Это категория типа устройства.Обычно используемые типы носителей - «экраны», «печать».

Функции мультимедиа

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

  • Ориентация
  • Разрешение
  • Соотношение сторон
  • Ширина
  • Высота

Основное объяснение минимальной и максимальной ширины

Есть другие точки останова для устройств, которые вы можете протестировать.Хотя мы используем термин «экраны устройств», на самом деле мы принимаем во внимание ширину экрана. Из-за этого давайте разберемся с min-width и max-width на небольшом примере.

Min-width:

В приведенном выше примере говорится, что элемент HTML с именем id как «ButtonWrapper» примет ширину 100% (от его родительского элемента), когда ширина устройства больше или равна 1024 пикселей.

Max-width:

max -width означает меньшую или равную ширине, указанной в этом медиа-запросе.Итак, в приведенном выше примере элемент, имеющий «#ButtonWrapper» в качестве идентификатора, получит ширину 70% от ширины всех экранов, которые меньше или равны 1024 пикселям.

Логические операторы

Поскольку эти медиа-запросы известны как своего рода операторы if, мы можем использовать логические операторы, чтобы сделать их более сложными и эффективными. Можно использовать все основные логические операторы, такие как «И», «ИЛИ» и «НЕ». Возьмем по одному.

AND Оператор:

В соответствии с приведенным ниже примером элемент класса «buttonWrapper» будет занимать 70% ширины от всей ширины экрана, которая больше или равна 768 пикселей и меньше или равна 1024 пикселей.Оператор действует как его же корневая функция.

Оператор ИЛИ:

На самом деле это различные медиа-запросы, разделенные запятыми.

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

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