Какая разница в max/min — width(height) и просто width(height)? — FRONT-END INFO на vc.ru
297 просмотров
Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.
Статья будет полезна, если ты уже приступил к практике и верстаешь свои первые проекты. Понимаю как важны такие простые разборы, поэтому решила по шагам показать как работает свойства на практике.
Как сказал htmlbook, а я дополню и разъясню. Width и height — устанавливает ширину и высоту блочных или заменяемых элементов. Ширина и высота не включает толщину границ вокруг элемента, значение отступов и полей.
Выражается свойство в %, пикселях (px), дюймах (in), пунктах (pt) и так далее. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родителя.
.container { width: 30%; } .block { background: #a288a3; color: black; }
Содержимое .block заняло ширину заданную в родительском блоке равную 30%
А если родитель явно не указан, то в его качестве выступает окно браузера.
И как раз с помощью приставки max или min, мы можем задать максимальную или минимальную ширину или высоту элемента. А если значение ширины и высоты (width,height) больше или меньше значения max(min)-width(height), то ширина элемента принимается равной максимальному заданному значению.
Чтобы было еще легче понять, запомните эти моменты:
- Если мы хотим, чтобы какой-то блок и содержимое в нем занимало фиксированную ширину или высоту мы добавляем max(min).
- Свойство max(min)-width(height) указанное еще и в % делает макет отзывчивым и адаптивным.
Разница между ними в том, что когда ты ставишь width, то у тебя фиксированная ширина, а когда ты ставишь max-width, то блок с таким свойством будет при уменьшении экрана тоже уменьшаться, это сделано для адаптивности. Вот вам пример на двух блоках ( в примере используем px, так будет удобнее увидеть разницу):
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Reiciendis, nesciunt. Vero blanditiis dolor alias nesciunt aliquam facilis vitae pariatur odit molestias odio non excepturi, repellat, praesentium et, suscipit nostrum! Nulla repellat vel autem dicta pariatur recusandae eum voluptatibus eveniet officiis ullam, exercitationem nesciunt quidem inventore vero quibusdam molestiae! Ducimus doloremque recusandae, error, totam soluta quas quidem culpa illum itaque repellendus quia animi minus iste harum vel ut corporis facere alias, sint tenetur. Eos, optio dolor ea omnis illo ullam cumque officiis rerum totam inventore dolores tenetur accusantium voluptas enim et doloremque temporibus, voluptates similique laudantium nisi veritatis voluptatum! Unde, maiores.</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, nesciunt. Vero blanditiis dolor alias nesciunt aliquam facilis vitae pariatur odit molestias odio non excepturi, repellat, praesentium et, suscipit nostrum! Nulla repellat vel autem dicta pariatur recusandae eum voluptatibus eveniet officiis ullam, exercitationem nesciunt quidem inventore vero quibusdam molestiae! Ducimus doloremque recusandae, error, totam soluta quas quidem culpa illum itaque repellendus quia animi minus iste harum vel ut corporis facere alias, sint tenetur.
Тут важно понимать, что если внутри блока не будет содержимого, мы ничего не увидим, автоматически заданные свойства будут равны 0, поэтому и наполнили блок текстом, а далее стилизуем два этих блока, задаём им ширину и цвет :
.block-width { width: 1500px; margin: auto; background: #a288a3; color: black; } .block-max-width { max-width: 1500px; margin: auto; background: #11ad8e; color: black; }
.block-max-width уменьшается вместе с окном.
На этом примере мы видим, что если размер ширины страницы будет меньше чем 1500px, блок 2, в котором указана максимальная ширина (max-width) будет уменьшаться, стараясь соответствовать размеру страницы, а блок 1 с обычной шириной остается всё того же размера.
Высота работает точно также.
Вот вам еще один пример с картинкой, который показывает как вообще работает свойство width:
<img src=»image.jpg» alt=»nature»>
Картинка без установления свойств ширины, так как ее размер по умолчанию больше и не помещается полностью, она уходит за рамки окна.
Без установления свойств ширины или высоты.
Устанавливаем ширину:
img { width: 30%; }
Теперь картинка занимает ширину окна, которую мы задали.
Заключение
Таким образом, мы можем задать любую ширину или высоту картинки или блока, которая нам нужна по проекту. А если вы хотите, чтобы на странице был блок, который должен увеличиваться или уменьшаться, но только до определенного размера, используйте max и min. Копируйте код в примерах, экспериментируйте со значениями, и больше практики на старте! Удачи.
css — Как объединить минимальную и максимальную ширину в одном медиа-запросе
спросил
Изменено 5 лет, 1 месяц назад
Просмотрено 22к раз
Этот медиа-запрос работает не так, как я ожидал.
Что я хочу сделать, так это скрыть элемент, если окно меньше 544 пикселей, а также скрыть его, если оно больше 767 пикселей. Таким образом, он будет виден только в том случае, если размер окна находится между 544 и 767 пикселями.
@media (максимальная ширина: 544 пикселей) и (минимальная ширина: 767 пикселей) {
.show-sm-только {
отображение: нет !важно;
}
}
Вроде по отдельности работают, а вместе нет.
Как мне этого добиться?
Вы можете объединить два медиазапроса в один, например:
@media (максимальная ширина: 544 пикселя), (минимальная ширина: 767 пикселей) {
.show-sm-только {
отображение: нет !важно;
}
}
EDIT Это скроет .show-sm-only на экране меньше, чем (max-width) 544px и на экране больше, чем (min-width) 767px.
0
Если вам нужен медиа-запрос, который применяется, когда ОБА условия истинны (я думаю, это то, что вы ищете здесь), используйте еще и .
Здесь он скрыт по умолчанию и виден только в диапазоне от 544 до 767 пикселей.
.мой-элемент {
дисплей: нет;
@media (минимальная ширина: 544 пикселя) и (максимальная ширина: 767 пикселей) {
дисплей: блок;
}
}
1
Вы этого хотите, ваши правила неверны. Прямо сейчас вы говорите, что он должен быть меньше, чем (max-width) 544px, но больше, чем (min-width) 767px, что невозможно. Смотрите ниже, как они наоборот.
РЕДАКТИРОВАТЬ Согласно комментариям. Чтобы сделать или (вместо и , что для вашей ситуации невозможно), разделите запятой:
@media (max-width: 544px), (min-width: 767px) {
.show-sm-только {
отображение: нет !важно;
}
}
4
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Bootstrap Медиа-запросы Использование
Введение
Как мы уже говорили ранее, в современной сети, которая почти одинаково исследуется с помощью мобильных и настольных устройств, настройка ваших веб-страниц в соответствии с экраном, на котором они отображаются, является необходимостью.
На самом деле это причины, по которым у нас есть мощная система Bootstrap в ее новейшей 4-й версии, которая все еще находится в стадии разработки до альфы 6, выпущенной на данный момент.
Но что именно представляет собой эта штука под капотом, которую она на самом деле использует для выполнения своей работы — именно то, как правильно переупорядочивается материал веб-страницы и что помогает сделать столбцы, поддерживающие инфиксы уровня сетки, такие как -sm- , -md- и т. д. раскрывают встроенную информацию до определенной точки останова и складывают ее под ней? Как в основном работают уровни сетки? Это то, на что мы просто собираемся взглянуть в этом.
Эффективные способы использования запросов Bootstrap Media Css:
Адаптивное поведение, вероятно, самого известного адаптивного фреймворка, расположенного в его новейшей четвертой версии, имеет возможность работать благодаря так называемому Bootstrap Media query Using. Что они обрабатывают, так это учитывают размер области просмотра — экрана гаджета или размер окна интернет-браузера, если страница отображается на персональном компьютере, и используют различные стандарты стиля по мере необходимости.
Таким образом, в общих словах они используют простую логику — размер больше или меньше определенного значения — и приятно активируют или выключают.
Каждый размер области просмотра, такой как Small, Medium и т. д., имеет свой собственный медиа-запрос, за исключением размера экрана Extra Small, который широко использовался в последнем выпуске alpha 6, и инфикса -xs- — — отброшено, так что вместо того, чтобы писать .col-xs-6 , нам просто нужно набрать .col-6 и получить элемент, занимающий половину экрана любого размера.
Общий синтаксис
Стандартный синтаксис запросов Bootstrap Media Класс использования внутри Bootstrap framework равен @media (min-width: ~ точка останова в пикселях здесь ~) ~ некоторые правила CSS, которые необходимо применить ~ , которые ограничивают правила CSS, определенные определенным размером области просмотра, но в конечном итоге можно применить противоположный запрос, например @media (max -width: ~ точка останова в пикселях здесь ~) ~ какой-то CSS ~ который в свою очередь будет применим для соединения с указанным размером точки останова и не более того.
Еще один фактор, на который следует обратить внимание
Здесь интересно обнаружить, что значения точек останова для различных размеров экрана варьируются в зависимости от отдельного пикселя в зависимости от фактически использованного правила, например:
Малый размер экрана — (минимальная ширина: 576 пикселей) и (максимальная ширина: 575 пикселей),
Средний размер экрана — (минимальная ширина: 768 пикселей) : 767 пикселей),
Размер экрана большого дисплея — (минимальная ширина: 992 пикселей) и (максимальная ширина: 591 пикселей),
И Очень большие размеры экрана — (минимальная ширина: 1200 пикселей) и ( max-width: 1199px),
Точки останова адаптивных медиазапросов
Эти контрольные точки в основном основаны на минимальных размерах области просмотра, а также позволяют нам увеличивать размер компонентов при изменении области просмотра.Bootstrap в основном использует следующие диапазоны медиа-запросов — или точки останова — в исходных документах Sass для дизайна, программы сетки и компонентов.
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей) // Нет медиа-запроса, так как это значение по умолчанию в Bootstrap // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) @media (минимальная ширина: 576 пикселей) ... // Средние устройства (планшеты, 768px и выше) @media (минимальная ширина: 768 пикселей) ... // Большие устройства (десктопы, 992px и выше) @media (минимальная ширина: 992px) ... // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше) @media (min-width: 1200px) ...
Из-за того, что мы пишем ресурсы CSS в Sass, все медиа-запросы фактически доступны примесями Sass:
@include media-breakpoint-up(xs) ... @include media-breakpoint-up(sm) ... @include media-breakpoint-up(md) ... @include media-breakpoint-up(lg) ... @include media-breakpoint-up(xl) ... // Пример использования: @include media-breakpoint-up(sm) .некоторый класс дисплей: блок;
..
@include media-breakpoint-up(sm) ...
@include media-breakpoint-up(md) ...
@include media-breakpoint-up(lg) ...
@include media-breakpoint-up(xl) ...
// Пример использования:
@include media-breakpoint-up(sm)
.некоторый класс
дисплей: блок; Мы периодически работаем с медиа-запросами, которые движутся в другом направлении (поставляемый размер дисплея или даже более компактный):
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей) @media (максимальная ширина: 575 пикселей) ... // Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей) @media (максимальная ширина: 767 пикселей) ... // Средние устройства (планшеты, менее 992 пикселей) @media (максимальная ширина: 991px) ... // Большие устройства (рабочие столы, менее 1200 пикселей) @media (максимальная ширина: 1199 пикселей) ... // Очень большие устройства (большие рабочие столы) // Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы ширины
Опять же, эти типы медиа-запросов дополнительно предоставляются с помощью миксинов Sass:
@include media-breakpoint-down(xs) .
..
@include media-breakpoint-down(sm) ...
@include media-breakpoint-down(md) ...
@include media-breakpoint-down(lg) ... Существуют также медиа-запросы и примеси для нацеливания на один сектор размеров экрана с использованием минимальной и максимальной ширины точки останова.
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей) @media (максимальная ширина: 575 пикселей) ... // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) @media (минимальная ширина: 576 пикселей) и (максимальная ширина: 767 пикселей) ... // Средние устройства (планшеты, 768px и выше) @media (минимальная ширина: 768 пикселей) и (максимальная ширина: 991px) ... // Большие устройства (десктопы, 992px и выше) @media (минимальная ширина: 992 пикселей) и (максимальная ширина: 1199 пикселей) ... // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше) @media (min-width: 1200px) ...
Эти медиа-запросы также легко доступны с помощью миксинов Sass:
@include media-breakpoint-only (xs) .
..
@include media-breakpoint-only(sm) ...
@include media-breakpoint-only(md) ...
@include media-breakpoint-only (lg) ...
@include media-breakpoint-only (xl) ... Кроме того, медиазапросы могут охватывать различную ширину точки останова:
// Пример // Применяем стили, начиная со средних устройств и заканчивая очень большими устройствами @media (минимальная ширина: 768 пикселей) и (максимальная ширина: 1199 пикселей) ... <код/> Миксин Sass для того же изменения масштаба экрана будет выглядеть так: <код> @include media-breakpoint-between(md, xl) ...
Заключительные мысли
Еще раз обратите внимание — на самом деле нет инфикса -xs- и @media для запроса Extra small — масштаб экрана меньше 576 пикселей — правила для этого становятся широко используемыми и работают по триггеру, когда область просмотра становится уже по сравнению с этим конкретным значением, и более крупные медиа-запросы области просмотра отключаются.
Эта разработка направлена на то, чтобы украсить как эти таблицы стилей Bootstrap 4, так и нас, как дизайнеров, потому что она следует обычной логике работы средств адаптивного контента, накапливающегося сразу после определенного места и с отменой инфикса.