Давно я ни писал ничего полезного. Но вот, спустя месяц активного сайтостроения решил поделиться "практичной фишкой". :)
В этой статье я даю читкод с помощью которого можно сделать сайт адаптивным с помощью одного лишь CSS.
Обычно эти возможности дает нам bootstrap. Но что делать, если складывается ситуация в которой применять bootstrap разметку не удается, а потребность в адаптивности все же пресутствует.
Итак, как сделать элементы сайта адаптивными с помощью одного лишь CSS?
Воспользуемся media запросами. Как они работают?
Пишем в css документе @media далее в скобках указываем минимальную или максимальную величину при которой будет работать селектор. Затем открываем фигурную скобку и следом по тексту добавляем те селекторы, значения которых будут работать при заданном размере:
@media (min-width: 992px) {
.text-wrapper {
color: #fff;
}
}
Мы также можем использовать промежутки. То есть указывать минимальные и максимальные размеры. Например:
@media (min-width: 768px) and (max-width: 992px) {
.text-wrapper {
color: #fff;
}
}
Это все на сегодня!
P.S. Следует заметить чтобы блок, например, показывался в промежутке между 0-768px, а в промежутке от 768px-1200px не показывался, то промежуток необходимо указывать включительно. Например:
@media (max-width: 768px) { // Определяем отрезок в котором css работает
.block-hidden {
display: block;
}
}
@media (min-width: 769px) { // Определяем отрезок в котором css НЕ работает
.block-hidden {
display: none;
}
}