Добрый день! Скажите, правильно ли использую сетку: Код (Text): /*Сетка Bootstrap v4.1.3*/ @media (max-width:575.98px) {} @media (min-width:576px) and (max-width:767.98px) {} @media (min-width:768px) and (max-width:991.98px) {} @media (min-width:992px) and (max-width:1199.98px) {} @media (min-width:1200px) {} Сдается мне, что это не самый лучший способ. Спасибо за помощь!
Bootstrap - это лишь инструмент. Каждый может использовать его как хочет, потому трудно сказать правильно/неправильно ну я например обычно 3, максимум 4 размера использую 320/640/1024... а так - если есть желание и терпение, хоть 10 точек создавайте ))
Так-то оно так. Но у Вас размер 320/640/1024, а поисковик выдает 576/768/992/1200.... А по факту я выравнивал элемент в блоке, у меня имперически получилось следующее: Код (Text): /*1-е фото на главной странице*/ @media (min-width:1350px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 500px;}} @media (min-width:992px) and (max-width:1199px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 450px;}} @media (min-width:768px) and (max-width:991px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 400px;}} @media (min-width:500px) and (max-width:767.98px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 300px;}} @media (min-width:400px) and (max-width:499px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 200px;}} @media (min-width:250px) and (max-width:399px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 150px;}} @media (max-width:249px) {#block524 > div.content > div > div > div > div > div > div > a > div {height: 108px;}} Может есть возможность использовать как-то более гибко и грамотно? Спасибо за помощь.
Просто ставишь и юзаешь без заморочек. Я использую всё по умолчанию. Нужно просто понять, как эта штука устроена. А устроена она по принципу mobile first. Это значит, что стили для условного брэйкпоинта распространяются на все бОльшие размеры экранов, если они не были переопределены. Можешь использовать 3 брэйкпоинта. Вот документация на русском. Там вся инфа есть.
Нашел следующие медиазапросы: Код (Text): // Экстрамалые девайсы («портретные телефоны», < 576px) @media (max-width: 575.98px) { ... } // Малые девайсы («ландшафтные», >= 575px) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Средние девайсы («таблетки», >= 768px) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Большие девайсы (большие десктопы, >= 992px) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // Большие девайсы (большие десктопы, >= 1200px) @media (min-width: 1200px) { ... } -------------------- Эти @media тможно из миксинов Sass реализовать, код получается эстетичней: Код (Text): //Экстрамалые девайсы («портретные телефоны», < 576px) @include media-breakpoint-only(xs) { ... } //Малые девайсы («ландшафтные», >= 575px) @include media-breakpoint-only(sm) { ... } //Средние девайсы («таблетки», >= 768px) @include media-breakpoint-only(md) { ... } //Большие девайсы (большие десктопы, >= 992px) @include media-breakpoint-only(lg) { ... } //Большие девайсы (большие десктопы, >= 1200px) @include media-breakpoint-only(xl) { ... } Интересно, миксины Sass все браузеры поддерживают? Спасибо.
@Sergey-911, всё ведь описано. Это всего лишь та сетка, что позволяет использовать классы, на неё завязанные (.col-..., буковками sm, md, lg, xl...). --- Добавлено --- И там-же есть раздел Overview, где разжёвано в подробностях.
SASS не поддерживается ни одним браузером вообще. Он компилируется в css. Таким образом, браузер понятия не имеет, где там у вас миксины