Css max width min width: Свойства Min и Max width/height в CSS / Хабр

Leave a Comment / Css / By /

Min и Max Width/Height в CSS

Все статьи | Дневник студента

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

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

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

1) Для кнопок (или «кнопкаподобных» дивов) стоит задавать padding и min-width

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

2) Для блоков с текстом стоит предпочесть min-height и padding

Таким образом мы избежим переполнения блока, текст не будет выезжать за края. Очень частая ошибка новичков — использовать просто height

3) Для «табов» обязательно нужно указать min-width и max-width

Но в таком случае остается нерешенным один очень важный вопрос: что делать со слишком длинным текстом? Для решения данной проблемы прекрасно подойдут 3 свойства ниже:

overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

Наглядный пример: https://codepen. io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

4) Минимальная ширина флекс-элемента по умолчанию равняется ширине контента

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

Но этот лайфхак как по мне не кажется очевидным, к данной теме он тоже относится, к тому же он выручал меня уже дважды за последние 2 недели (!)

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

Все дело вот в чем: по умолчанию флекс-контейнер не может стать меньше длины своего контента: то есть по умолчанию min-width: ширина контента. Для корректной работы вам нужно указать min-width: 0:

Наглядный пример: https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

5) Минимальная высота флекс-элемента по умолчанию равняется высоте контента

Пункт, аналогичный пункту 4, только хочу так же привести его с хорошим примером: если указать блоку-контейнеру фиксированную высоту и написать блоку с текстом overflow-y: scroll, height: 100%, то это ни к чему не приведет

Здесь так же нужно воспользоваться min-height: 0:

Наглядный пример: https://codepen. io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

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

Теперь верстать у меня получается гораздо лучше)

Надеюсь, что эти советы покажутся вам полезными! 🙂

Александр Ковалец 03 февраля 2021

Рекомендуемые программы

Профессия

с нуля

Фронтенд-разработчик

Разработка фронтенд-компонентов для веб-приложений

16 марта 10 месяцев

Профессия

Новый с нуля

Онлайн-буткемп. Фронтенд-разработчик

Интенсивное обучение профессии в режиме полного дня

20 апреля 4 месяца

Профессия

с нуля

Python-разработчик

Разработка веб-приложений на Django

16 марта 10 месяцев

Профессия

с нуля

Java-разработчик

Разработка приложений на языке Java

16 марта 10 месяцев

Профессия

с нуля

PHP-разработчик

Разработка веб-приложений на Laravel

16 марта 10 месяцев

Профессия

с нуля

Инженер по тестированию

Ручное тестирование веб-приложений

16 марта 4 месяца

Профессия

с нуля

Node. js-разработчик

Разработка бэкенд-компонентов для веб-приложений

16 марта 10 месяцев

Профессия

с нуля

Fullstack-разработчик

Разработка фронтенд- и бэкенд-компонентов для веб-приложений

16 марта 16 месяцев

Профессия

c опытом

Разработчик на Ruby on Rails

Создание веб-приложений со скоростью света

16 марта 5 месяцев

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

Профессия

с нуля

Аналитик данных

Сбор, анализ и интерпретация данных

16 марта 9 месяцев

Please enable JavaScript to view the comments powered by Disqus.

min-width ⚡️ HTML и CSS с примерами кода

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

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

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

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

Демо

Блоки
  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-trim
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • overflow
  • overflow-x
  • overflow-y
  • visibility

Синтаксис

/* <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)).

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

min-width: auto;

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

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

  • CSS Intrinsic & Extrinsic Sizing Module Level 3
  • CSS Level 2 (Revision 1)

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

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>

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

❮ Назад Полное руководство по CSS Далее ❯


Пример

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

span. ex1 {
  минимальная ширина: 500 пикселей;
}

Попробуйте сами »

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

Свойство

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

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

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

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

Показать демо ❯

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

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

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

Недвижимость
минимальная ширина 1,0 7,0 1,0 2.0.2 4,0

Синтаксис CSS

min-width: length |initial|inherit;

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

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

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

Учебник CSS: Высота и ширина CSS

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

Ссылка HTML DOM: свойство minWidth

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

css — максимальная ширина против минимальной ширины

спросил

Изменено 2 года, 7 месяцев назад

Просмотрено 114 тысяч раз

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

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

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

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

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

  • css
  • медиа-запросы
  • zurb-foundation

1

Часть 2 Ответ

Часть 1: Чтобы ответить на вопрос «почему люди используют минимальную ширину вместо максимальной?»:

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

Мобильный стиль с минимальной шириной, стиль по умолчанию — мобильный стиль. Запросы после этого затем нацелены на все более крупные экраны.

 корпус {
    /* здесь стили по умолчанию,
       таргетинг в первую очередь на мобильные устройства */
}
Экран @media и (мин. ширина: 480 пикселей) {
    /* стиль меняется, когда экран становится больше */
}
Экран @media и (мин. ширина: 800 пикселей) {
        /* И даже больше */
    }

И наоборот, при использовании max-width сначала используется рабочий стол, а затем добавляются запросы, чтобы сделать стили удобными для мобильных устройств

 body {
        /* здесь стили по умолчанию,
           в первую очередь нацелен на настольные компьютеры */
    }
Экран @media и (max-width:800px) {
    /* стиль меняется, когда экран становится меньше */
}
Экран @media и (максимальная ширина: 480 пикселей) {
        /* И даже меньше */
    }

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

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

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

 body {
        /* здесь стили по умолчанию,
           таргетинг в первую очередь на мобильные устройства
           ТАКЖЕ покроет ширину 361 - 479 */
    }
Экран @media и (max-width:360px) {
    /* стиль ТОЛЬКО для экранов шириной 360px или меньше */
}
Экран @media и (мин. ширина: 480 пикселей) {
    /* стиль меняется, когда экран становится больше */
}
и т. д...

0

Это действительно зависит от того, как работает ваша таблица стилей. Например:

 @media screen и (min-width:100px) {
    body { вес шрифта: полужирный; }
}
Экран @media и (мин. ширина: 200 пикселей) {
    тело {цвет:#555; }
}

Приведенные выше два медиа-запроса сделают шрифт body полужирным, если экран больше или равен 100 пикселей, но также сделает цвет #555 , если он больше или равен 200 пикселей;

Другой пример:

 @media screen и (max-width:100px) {
    body { вес шрифта: полужирный; }
}
Экран @media и (max-width:200px) {
    тело {цвет:#555; }
}

В отличие от первого примера, это делает шрифт body полужирным и цветом #555 только в том случае, если ширина экрана находится в диапазоне от 0 до 100 пикселей. Если он находится между 0px и 200px, это будет цвет #555 .

Прелесть медиа-запросов в том, что вы можете комбинировать следующие операторы:

 @media screen и (min-width:100px) и (max-width:200px) {
    body { вес шрифта: полужирный; цвет:#555; }
}

В этом примере вы ориентируетесь только на устройства шириной от 100 до 200 пикселей — ни больше, ни меньше.

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

6

Короче говоря, min-width — это 1-й подход для мобильных устройств, max-width — 1-й подход для настольных компьютеров.

Минимальная ширина — это минимальная ширина, при которой стиль начинает применяться. (Для правильной работы необходимо заказать от меньшего к большему, сначала обычные стили). Иными словами: если ширина устройства больше или равна…, примените определенные стили. С минимальной шириной стили НАЧАЮТ и продолжают работать до тех пор, пока соблюдается минимальная ширина, а максимальная ширина не указана.

Максимальная ширина — это максимальная ширина, при которой стиль продолжает применяться. После этого стиль перестанет применяться. (Для правильной работы необходимо заказать от большего к меньшему, сначала обычные стили). Иными словами: если ширина устройства меньше или равна…, примените определенные стили. Стили останавливаются, как только достигается ширина, превышающая максимальную ширину.

Наконец, это зависит от того, как вы хотите реализовать. Не существует ОДНОГО ПРАВИЛЬНОГО решения, как могут утверждать некоторые. По моему мнению, min-width прекрасно работает, когда вы начинаете с нуля, но max-width часто имеет больше смысла при модернизации существующего веб-сайта.

Что такое подходы Mobile-first и Desktop-first?

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

Этот подход использует

мин-ширина

медиазапросы.

Вот краткий пример: 

 // Это применимо от 0 до 600 пикселей.
тело {
  фон: красный;
}
// Это применимо начиная с 600 пикселей
@media (минимальная ширина: 600 пикселей) {
  тело {
    фон: зеленый;
  }
}

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

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

Вот краткий пример: 

 // Это применимо от 600 пикселей и выше. 
тело {
  фон: зеленый;
}
// Это применимо от 0px до 600px
@media (максимальная ширина: 600 пикселей) {
  тело {
    фон: красный;
  }
}

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

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

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

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

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

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

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

1

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

На моем сайте теперь есть макеты для устройств шириной 320, 480, 768, 960 и 1024 пикселей и т. д., поэтому я добавил медиа-запросы, которые выглядят следующим образом: max-width: 959px и т.д. Это отлично работает — сайт ведет себя как надо.

Однако недавно я обнаружил, что в Chrome Developer Tools «Device Mode» есть инструмент Media Queries Tool, который мне очень и очень полезен. Это позволяет мне щелкнуть, чтобы отобразить веб-сайт на каждом уровне медиа-запроса, который Chrome находит на моей странице. Это очень помогает мне при разработке адаптивных макетов.

Инструмент медиа-запросов использует числа, которые он находит в медиа-запросах, т.е. 479, 767, 959, 1023 и т. д. Но это означает, что, например, если я хочу посмотреть, как выглядит мой макет для устройства шириной 480 пикселей , я должен щелкнуть медиа-запрос уровня максимальной ширины 767 пикселей, что для меня довольно неинтуитивно.

Это заставило меня переосмыслить мой текущий CSS для настольных компьютеров, и я буду переписывать свой CSS, используя подход, ориентированный на мобильные устройства.

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

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