Адаптивный дизайн

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

07/06/2019

Ну что готовы?

LET'S GO!

Flexbox + Media = Адаптивный дизайн

Мы не будем расписывать про адаптивный дизайн, и, уж тем более, нам не особо хотелось бы расписывать про flexbox. Это все есть в интернете и повторяться нет никакого смысла. Мало вероятно что данная статья подойдет для молодых верстальщиков... хотя нет, я не прав. Она подойдет для всех.

Начнем. Построим для примера два одинаковых блока, и присвоим им бордеры в 1px.

<div class="container">
<div></div>
<div></div>
</div>
.container {
width: 100%;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center;
-webkit-align-items: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

.container div {
width: 50%;
border: 1px solid black;
height: 20em;
}

Что мы сделали

Мы создали контейнер c шириной в 100% (для ie) и присвоили ему display: flex. Про сетку и растяжку писать не будем. Затем добавили в этот контейнер две дочки. Дочкам добавили высоту и ширину в 50%. А самому контейнеру (на всякий случай) присвоили выравнивание дочерних элементов по оси Y (align-items).

Основное:

Не забываем про body {margin: 0}, * {box-sizing: border-box}

Итого:

Мы получим примерную верстку, только без штриховки и с инверсией по цвету, понятное дело

seaburg

Добавим media

Далее все просто. Данную тему можете использовать как пожелаете. Если вы выставите для дочек ширину больше 50%, то в контейнере автоматически сработает flex-flow и скинет дочерние блоки относительно друг друга. Про media и pixel ratio также не будем расписывать, поскольку материала в интернете уйма.

Отлично. Рассмотрим самый простой вариант

@media screen and (max-width: 48em) {
.container div {
width: 100%;
}
}

Что мы сделали

Добавили media запрос в качестве условия c максимальной шириной примерно равной 768px (или ширине ipad). И определили, что дочки на этой ширине экрана (< 48em) должны иметь собственную ширину в 100%

Основное:

Не забываем про meta tag viewport

Итого:

Мы получим такую вещь, только без штриховки и с инверсией по цвету понятное дело. Можете использовать ее как захотите. В данном примере для дочек мы получаем ширину либо 100, либо 50. При чем для всех дочек div :3

seaburg

Изи катка :3

Main