min-width в CSS


Содержание

Свойство min-w >

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

Примечание: тут под содержимым понимается контентная часть + внутренние отступы (padding-left, padding-right) + толщина границ (border-left, border-right), т.е. содержимое эквивалентно width.

Свойства min/max-width активно применяются при «резиновой» верстке.

Min-width в CSS

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

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

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

Вычисление ширины элементов

Соотношение первичных значений Итоговая ширина
Если min-width max-width max-width
Если min-width > width min-width
Если min-width > width > max-width min-width
Если min-width > width » означает «больше», а « Вычисление размеров замещаемых элементов
Соотношение первичных значений Итоговая ширина Итоговая высота
Если width > max-width, где (max-width * height/width) max-width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height > max-width * height/width)
Если (width max-width) и (height max-height min-width max-height
Если height > max-height, где (max-height * width/height) max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width > max-height * width/height)
Если (width min-height/height) и (max-height max-height)
Если width > max-width, где (max-width * height/width) > min-height max-width max-width * height/width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height min-height/height) и (max-height > min-width * height/width)
Если height > max-height, где (max-height * width/height) > min-width max-height * width/height max-height
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width min-height * width/height)

Тип свойства

Применяется: ко всем элементам, кроме незамещаемых встроенных (inline) элементов ( , , и т.д.), тегов и и элементов с display: table-column и table-column-group.

Значения

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

  • Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
  • Проценты — значения в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (position: static или relative ) минимальная ширина считается относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то относительно тела документа ( ).
    2. Минимальная процентная ширина самого тела документа считается относительно ширины корневого элемента ( ).
    3. Минимальная ширина корневого элемента считается относительно ширины окна браузера.
    4. Для элементов с position: fixed минимальная ширина считается относительно ширины окна браузера.
    5. Для элементов с position: absolute минимальная ширина считается относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно окна браузера.

    Отрицательные процентные значения (-20%) недопустимы. Кроме этого, если ширина элемента-предка, от которого идет расчет, является отрицательной, то процентное значение станет равным нулю (0).

  • inherit — наследует значение min-width от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

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

Синтаксис

Пример CSS: использование min-width

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Нет Частично Да Да Да Да Да

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

min-w > IE Opera Chrome Firefox Safari IE7.0+; IE 7.0 не поддерживает значение inherit + + + +

Пример

Задаем минимальную ширину элемента:

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

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

Примечание: свойство min-width не включает в себя отступы, поля и границы.

Выбираем медиа-запросы: min-w >
  • Сайтостроение
  • Статьи
  • Верстка сайта
  • Основы CSS

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

Ориентир на настольные ПК и max-width

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

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

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

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

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

max-width вместо более подходящего решения

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

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

Так что же лучше использовать?

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

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

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

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

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

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

Как задавать в css размер блока

Дата публикации: 2020-02-23

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

На какие типы делятся элементы

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

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Простые свойства для размеров

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

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

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

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

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

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

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

Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Размер в процентах

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

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

В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.

Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере

Как влияют отступы на размеры блоков

Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).

Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.

Вот уже и получается, что общая ширина сайдбара увеличилась на 44 пикселя (отступы справа и слева по 20 и рамка с этих же сторон по 2). Есть вариант для тех, кто не хочет сильно заморачиваться над размерами и записывать их сразу с учетом отступов и рамок. Тогда нужно записать так:

Это замечательное свойство делает так, что в ширину блока (width) начинают включаться внутренние отступы (padding) и рамки. Теперь если вы зададите контенту размер в 62%, он останется таковым в любом случае. А ведь есть еще и внешние отступы, но они уже на размеры блока не влияют. Но если вы захотите сделать, допустим, большой отступ справа от боковой колонки, то контент просто не влезет и вынужден будет перенестись вниз.

Резиновые картинки

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Свойство CSS min-width

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

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

Заметка: min-width (минимальная ширина) элемента не включает поля (padding), рамки (border) или внешние отступы(margin) !

Значение по умолчанию
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.minW

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

Свойство min-width поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

Min-width в CSS

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

Это свойство применимо к блочным элементам и тегу .

Не поддерживается Internet Explorer до версии 8.0.

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

Значение

— в единицах измерения, принятых в CSS (подробнее здесь. ),

— none — отменяются все ограничения на ширину,

— inherit — принимает значение свойства родительского элемента.

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

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

Пример

Пример — Свойство min-width

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Свойство min-width

: #FF0000 solid 2px ; padding : 5px ; min-w >: 500px ; «> Минимальная ширина абзаца 500 пикселей. Попробуйте уменьшить ширину окна браузера — вместе с этим будет уменьшаться ширина блока, но до 500 пикселей. При дальнейшем сужении окна браузера появится горизонтальная полоса прокрутки.

Минимальная ширина сайта

17.05.2013, 16:20

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

Оптимальная минимальная ширина сайта?
Какая, по вашему мнению, оптимальная ширина окна? Есть ли смысл делать даже под 320px? Заметил.

Минимальная ширина окна браузера(не сайта!)
Всем привет, подскажите как установить минимальную ширину окна браузера, например вот тут.

Минимальная ширина шаблона
width:54%; min-width:670px; Почему минимальная ширина не работает?

Блог Vaden Pro

  • 11 просмотров

Характеристики свойства

В каких браузерах работает?

8.0+ 1.0+ 4.0+ 2.0+ 1.0+ 2.1+ 2.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
+ + +

Для чего используется?

Свойство фиксирует минимально возможную ширину для объекта. При чем это пограничное значение, которое всегда должно быть меньше реального. Обычно, помимо указанного свойства, используются width и max-width. Данный тандем работает по следующему принципу:

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

Как правильно задавать?

Какие могут быть значения?

Значение этого параметра указываются как для свойства width.

  • none — отключает действие свойства.
  • inherit — повторяет параметры родителя.

Выбираем между «min-w >

Довольно часто возникает вопрос, когда стоит использовать min-width, а когда max-width? Тем, для кого отзывчивый дизайн стал привычным делом, такой вопрос может показаться странным. И такие люди знают ответ: все зависит от ситуации . Но анализ исходников сайnов показывает, что многие дизайнеры и разработчики до сих пор не очень в этом уверены. В этой статье мы попробуем разобраться, что значит \»все зависит от ситуации\» в отношении конкретно этого вопроса.

Десктопные версии и max-width

Существует немалое количество дизайнеров/разработчиков, которые до сих пор считают своим основным направлением дизайна десктоп , а остальные (в основном меньшие) размеры экранов второстепенными; зачастую это отговорка, так как разработка для этой категории устройств требует значительно большего количества усилий, по сравнению с их десктопными конкурентами. Как правило, если исследовать CSS этих сайтов, в них в основном используется медиазапрос max-width.

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

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

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

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

Использование max-width вопреки здравому смыслу

Есть несколько причин, почему, даже если вы знаете, как сделать лучше, следует нарочно использовать поход с max-width, похожий на описанный выше:

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

Так что же лучше использовать?

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

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

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

В данном случае, имеет смысл оставить таблицу в стандартном виде, за исключением браузеров, которые распознают медиазапросы, и когда экран не более 30em (в приведенном примере).

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

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

Илон Маск рекомендует:  Администрирование сайта
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL