Media Queries и бъдещето на адаптивения уеб

Живеем във времена, в които над 80% от уеб трафика минава през смарт устройства – предимно мобилни телефони и таблети. Важността да дадем възможност на потребителя да навигира и консумира съдържанието на даден уеб сайт при тези резолюции е огромна. Ето защо флуидното и адаптивно поведение на страниците се е превърнала в една от основните задачи на всеки front-end разработчик.

В тази статия/tutorial ще ти дам няколко съвета как да избираш т.нар. breakpoints, как да ги имплементираш и кои са основните правила, които трябва да спазиш, за да може сайтът, над който работиш, да се държи еднакво добре както на десктоп, така и на мобилно устройство.

Да започваме.

Първо нека погледнем какъв ще е HTML кодът, с който ще работим.
В div с клас container имаме три child div-a, всеки от които с клас child-item:

<div class="container">
    <!-- single item -->
    <div class="child-item">
        <h2>Box card</h2>
        <p>Some text goes here.</p>
    </div>
    <!-- .end of single item -->
    <!-- single item -->
    <div class="child-item">
        <h2>Box card</h2>
        <p>Some text goes here.</p>
    </div>
    <!-- .end of single item -->
    <!-- single item -->
    <div class="child-item">
        <h2>Box card</h2>
        <p>Some text goes here.</p>
    </div>
    <!-- .end of single item -->
</div>

В асоциираният CSS файл сме задали настройки на container елемента, както и на неговите child елеемнти с клас child-item:

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.child-item {
    display: inline-block;
    width: 33%;
    text-align: center;
    border: 1px solid #989898;
}

.child-item:nth-child(1) {
    background-color: #615f5f;
}

.child-item:nth-child(2) {
    background-color: #999898;
}

.child-item:nth-child(3) {
    background-color: #beb9b9;
}

Както знаем, контейнерът с display: flex; ще направи така, че всички съдържащи се в него елементи да се подравнят на един ред.

В случаят ние искаме да имаме трите елемента на един ред при по-големи (десктоп и лаптоп) резолюции, но при по-малки (таблет) искаме да са само два елемента, а при смертфон – един.

Точно тук се намесват и CSS media query-тата. С тяхна помощ ще дефинираме т.нар. breakpoints или иначе казано – между какви резолюции да прилагаме съответните стилови правила.

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background-color: rgb(248, 195, 195);
    }
    .child-item {
        width: 49%;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    body {
        background-color: rgb(147, 253, 253);
    }
    .child-item {
        width: 100%;
    }
}