Робимо адаптивний дизайн в темах вордпрес своїми руками
Зміст.
Задаємо браузеру команду.
Якщо потрібна підказка, куди вставити код, дивимось скріншот.
На цьому пункт закінчено, тільки не зваблюйтеся, решта разів у десять будуть більшими.
Змінюємо значення на максимальні.
Другим кроком буде застосування технології CSS, яка називається гумовою версткою. Цей простий спосіб буде автоматично стискати і розширювати наш сайт до якого нам потрібно розміру. Вся суть зводиться до того, щоб замінити всі фіксовані величини на змінювані максимальні (не знаю наукового терміну тому придумав сам). На не адаптованих сайтах всі величини фіксовані і в коді вони виглядають так.
А щоб сайт міг стискатися, треба лише додати до параметра width, ось таку приставку max.
Цей параметр вказує, що максимальна ширина може бути лише до вказаного значення (у моєму випадку 960 px), а може бути менше. І скільки не розтягуй вікно (а точніше сказати збільшувати дозвіл), сайт не змінить свого максимального розміру, а ось стискати скільки хочеш.
Налаштовуємо сайтбар та контент.
Дві важливі частини блогу, у класиці, перший праворуч, другий ліворуч. І нам треба зробити так щоб вони теж нормально вели себе надалі.
Для успішного адаптивного дизайну нам треба розділити ці два пункти на відсотки. Припустимо у нас ширина всього сайту 1000px, контент 750 px, а сайтбар, логічно, 250 px, значить перший займає 100%, другий 75%, атретій 25px, ось і вся проста арифметика.
Після виправлення коду.
Визначення розмірів, звідки починатимемо.
Тепер йде візуальна робота, нам треба визначити з якого краю сайт починає "плисти", в сенсі змінюватися, і погано відображатися на екрані. Взагалі, щоб визначити, чи є на блозі мобільна версія з адаптивним дизайном, треба просто стиснути вікно браузера, і якщо все красиво, то він присутній. Бачите, шапка замінюється на фон, область контенту, на весь екран, а сайт бар виводиться знизу.
Концепція медіа запиту.
От і дійшли майже до фіналу, одразу напишу визначення.
Медіа запит-це такий запит, який змінює будь-який параметр вихідного елемента, на свій за певних умов.
У нашому випадку ми замінюватимемо стилі у певного об'єкта, при зміні дозволу, зокрема ширини. Видів безліч, але ми будемо користуватися тільки одним. Я склав такий код в самий низ файлу style.css, який ви вже будете заповнювати самі, я лише покажу один приклад.
Зараз вам покажу сам принцип, і розберу його на прикладі наших старих друзів контенту і сайтбара, нам треба досягти того, щоб один розширився, а інший сповз вниз. Пам'ятайте відсотки, ми не дарма їхвводили, тепер треба їм треба прийняти обом значення по 100% кожен, тоді ми й досягнемо потрібного ефекту. Наприклад, даю код.
Як можете бачити, медіа запити до цих двох об'єктів треба прописувати в кожному інтервалі, тому що нам потрібно, щоб цей ефект залишався незмінним. Якщо ми пропустимо хоч один, то на якомусь проміжку, області контенту і сайтбара, в оригіналі займатимуть 75% і 25%.
І ще пишемо тільки ті стилі, які вам потрібно змінювати, припустимо в оформленні шрифту у вас зазначено розмір, сімейство, колір. А для адаптивного відображення вам потрібно тільки змінити розмір, так ось і прописуйте його, а решту залиште.
Сподіваюся ви зрозуміли, принцип простий:
- Вибираєте інтервал.
- Звужує вікно браузера, паралельно увімкнувши “Перегляд коду елемента”, щоб бачити лінійку.
- Дивіться які компоненти починають поводитися погано.
- Прописуєте медіа запити до них, щоб усе стало на свої цілі.