Створіть адаптивний сайт за тиждень: медіа-запити (частина 4)

Зміст

• 01. Додавання медіа-запитів
• 02. Анатомія медіа-запиту
• 03. Ще одне ...
• 04. Вибір точок зупинки
• 05. Налаштування наших мініатюр
• 06. Не тільки ширина

• Необхідні знання: Проміжні CSS та HTML
• Потрібно: Текстовий редактор, сучасний браузер, графічне програмне забезпечення
• Час проекту: 1 година (всього 5 годин)
• Файл підтримки

Порівняно нова частина специфікації CSS, медіа-запити, безсумнівно, є найбільш захоплюючим аспектом адаптивного веб-дизайну та областю, що дозріла для подальших експериментів.

Прийнявши потребу в адаптивних макетах, деякі розглядали медіа-запити як засіб для модернізації адаптивних макетів на існуючі сайти фіксованої ширини. Серед тих, хто прийняв адаптивні макети, багато хто робив це з точки зору робочого столу, приховуючи вміст та функції, коли область перегляду звужується.

Протягом цього посібника ми використовували альтернативний, мобільний підхід. Тепер, коли ми хочемо включити медіа-запити, ми можемо подумати додавання функції, які збільшуються на екрані нерухомості, впевнені в тому, що розмітка та дизайн, що лежать в основі нашого веб-сайту, є гідною базою.

Сьогодні ми вийдемо за рамки нашого модельного ряду та створимо окремі сторінки, необхідні для нашого веб-сайту. Роблячи це, ми побачимо, як будуються медіа-запити, і реалізуємо їх по-справжньому чуйним способом.

01. Додавання медіа-запитів

Оскільки компоненти в нашому портфоліо шаблонів завершені та працюють поза межами будь-якого макета, настав час розмістити їх на різних сторінках, що складають наш веб-сайт.

Ми почнемо з нашої домашньої сторінки. З дизайну, орієнтованого на робочий стіл, ми бачимо, що у ширших вікнах перегляду наш макет повинен виглядати наступним чином:

Беручи виміри за нашим дизайном, ми можемо описати область документа в CSS наступним чином:

.document {
прокладка: 0 5%;
}
.main {
ширина: 74,242424242424%; / * 784/1056 * /
поплавок: ліворуч;
}
.complementary {
ширина: 22,727272727273%; / * 240/1056 * /
поплавок: праворуч;
}

Як ми дізналися у другій частині цього підручника, ми використовуємо наступну формулу для обчислення процентної ширини цих стовпців:

(ціль / контекст) * 100 = результат

Коли ми змінимо розмір нашого браузера, ми побачимо, що розмітка нашого робочого столу масштабується від екрану найменшого розміру до найбільшого. Звичайно, при невеликих розмірах колонки занадто вузькі, а довжина рядків настільки коротка, що вміст важко читається. Ми хочемо цього макету лише тоді, коли для його роботи достатньо місця.

Тут виникають медіа-запити. Припускаючи, що цей макет повинен набути чинності лише тоді, коли браузер ширший за 768px, ми можемо додати такий CSS:

.document {
прокладка: 0 5%;
}
Екран @media та (мінімальна ширина: 768 пікселів) {
.main {
ширина: 74,242424242424%; / * 784/1056 * /
поплавок: ліворуч;
}
.complementary {
ширина: 22,727272727273%; / * 240/1056 * /
поплавок: праворуч;
}
}

Тепер, коли область перегляду вужча, ніж 768px, усе, що знаходиться в медіа-запиті, буде проігноровано. Буде проігноровано будь-яким браузером, який також не підтримує медіа-запити.

02. Анатомія медіа-запиту

Щоб зрозуміти, що тут відбувається, давайте розглянемо, як будується медіа-запит. Ми можемо розділити його на дві частини:

• Екран @media: Перша частина медіа-запиту - це тип носія. Ви можете розпізнати цей синтаксис, якщо коли-небудь включали стилі друку у свій CSS. Ви також можете розпізнати назву типу з ЗМІ атрибут на посилання> елемент. Це пов’язано з тим, що обидва приймають затверджений набір типів носіїв, що містяться в специфікації CSS 2.1.
• (мінімальна ширина: 768px): Друга частина - запит. Сюди входить особливість для запиту (у цьому випадку мінімальна ширина області перегляду) та відповідного значення перевірити на (768px).

Коли ми говоримо про адаптивний веб-дизайн, існує тенденція зосереджуватися на ширині, але є й інші функції, на які ми також можемо протестувати:

• (мінімальна | макс-) ширина і (хв. | макс.) висота: Вони дозволяють нам запитувати ширину та висоту області перегляду (тобто вікна браузера).
• (min- | max-) ширина пристрою і (min- | max-) висота пристрою: Вони дозволяють нам запитувати ширину всього дисплея. З мого досвіду, як правило, більш розумно базувати макети на вікні перегляду, а не на дисплеї.
• орієнтація: Тут ви можете відразу подумати про можливості; подумайте про програми, які відображають різний вміст залежно від орієнтації вашого телефону - те саме можливо в Інтернеті.
• (min- | max-) співвідношення сторін: Це дозволяє нам адаптувати макети на основі співвідношення вікна браузера ...
• (min- | max-) співвідношення сторін пристрою: ... і це дозволяє нам робити те саме на основі пропорції пристрою. Торік Оуен Грегорі написав чудову статтю, в якій досліджував, як ми можемо використовувати цей запит, щоб пов’язати наш дизайн із пристроями, на яких вони з’являються.
• (хв. | макс.) монохромний: Ми також можемо перевірити, чи має пристрій монохромний дисплей чи ні. Уявіть, наскільки це було б корисно, якби пристрої Amazon e-ink Kindle не брехали і повідомляли про свої екрани як про кольорові!

Заключна частина нашого запиту є, мабуть, найбільш корисною. З допомогою і, ми можемо перевірити кілька функцій в одному запиті. Наприклад:

Екран @media та (мінімальна ширина: 768px) та (орієнтація: альбомний) {
...
}

Як бачите, медіа-запити можуть допомогти нам створити досить переконливий досвід - і я лише торкнувся поверхні. Якщо ви шукаєте легкого читання перед сном, ви можете зробити гірше, ніж прочитати специфікацію запиту медіа W3C, яка описує всі функції, які ми можемо перевірити.

03. Ще одне ...

Незважаючи на те, що ми включили медіа-запити в наш CSS, якщо ми переглянемо наш сайт на мобільному пристрої, ви помітите, що наш сайт все ще відображається так, ніби дисплей був ширшим за 768px.

Щоб зрозуміти, чому це відбувається, нам потрібно пройти короткий урок історії.

Коли в 2007 році був анонсований оригінальний iPhone, однією з найбільших його позицій була можливість переглядати "справжню павутину", навіть якщо це означало сайти, орієнтовані на робочий стіл фіксованої ширини, які потрібно було зім'яти, щоб помістити на його маленький екран. IPhone зміг це зробити, повідомивши, що його дисплей має ширину 980 пікселів, перш ніж зменшити масштаб веб-сторінок відповідно до його екрану шириною 320 пікселів.

Але iPhone був представлений до появи адаптивного дизайну. Зараз, коли автори розробляють сайти, розроблені для мобільних пристроїв, ця функція менш корисна. На щастя, Apple включила спосіб обходу такої поведінки, і оскільки його прийняли інші виробники, він став майже де факто стандартний. Це просто передбачає додавання синглу мета елемент нашої розмітки:

meta name = "viewport" content = "Initial-scale = 1.0, width = device-width" />

Це повідомляє браузерам, орієнтованим на viewport, що веб-сайт не слід зменшувати, і що ширина вікна браузера повинна оброблятися так само, як загальна ширина пристрою. Щойно ми додамо цей рядок, наш веб-сайт з’явиться із передбачуваним макетом:

04. Вибір точок зупинки

Повернемось до нашого медіа-запиту:

Екран @media та (мінімальна ширина: 768 пікселів) {
...
}

Значення, при яких адаптується макет, зазвичай називають точками зупинку. Якщо ви пам’ятаєте, у другій частині я сказав, що використання пікселів є ознакою невідповідного мислення, але тут я вибрав 768px, мабуть, тому, що це ширина звичного пристрою.

Замість того, щоб вибирати точки зупинку на основі характеристик популярних пристроїв, може бути більш ефективним розглянути значення, отримані з нашого вмісту, наприклад, зручну довжину рядків для читання або максимальний розмір зображення.

Оскільки розмір нашого типу використовується за допомогою ems, для наших медіа-запитів доцільним є також використання ems. Насправді це робить додаткову перевагу. Коли користувач змінює розмір тексту в браузері, сторінки адаптуються для використання менших точок зупинки. Наш веб-сайт адаптується не лише залежно від розміру області перегляду, але й розміру шрифту. Насправді, лише коли я побачив, як Джеремі Кіт демонструє медіа-запити на основі em, я зрозумів, наскільки вони можуть бути потужними.

Незважаючи на те, що наш дизайн може вказувати деякі можливі точки зупинку, часто найкращий спосіб вибрати їх - експерименти. Налаштувавши ширину вікна браузера, я вирішив, що 800 пікселів - це хороша ширина, при якій можна перейти на більш складний макет.

Як же ми виражаємо 800 px в ems? Знову ж таки, ми можемо використовувати нашу формулу, але який контекст? При обчисленні ems для медіа-запитів контекстом завжди є розмір шрифту за замовчуванням браузера незалежно від того, чи було замінено це значення у вашому CSS. За замовчуванням це зазвичай 16 пікселів, що дає нам:

800 / 16 = 50

Тепер ми можемо оновити наш медіа-запит так:

Екран @media та (мінімальна ширина: 50em) {/ * 800px * /
...
}

05. Налаштування наших мініатюр

Ви пам’ятаєте, що в частині 2 ми створили стилі наших мініатюр, щоб вони реагували. Однак, як тільки зображення в цих мініатюрах досягнуть повної ширини, праворуч від кожного зображення з’явиться область пробілу. Знову ж таки, медіа-запити дозволяють нам це виправити.

Ось наш оригінальний CSS:

ol.media li.media-item {
фон-колір: #fff;
маржа: 0 4.16666666667% 4.16666666667% 0;
ширина: 47,91666666667%;
поплавок: ліворуч;
}
ol.media li.media-item: nth-child (2n) {
поле праворуч: 0;
}

Точка, в якій з’являється цей пробіл, подібна до того, як браузер стає ширшим за 560 пікселів.Ми виберемо це значення, при якому буде замінено на відображення трьох мініатюр на рядок. Ми можемо зробити це, додавши наступний CSS:

Екран @media та (мінімальна ширина: 35em) {
.media-item {
ширина: 30,612244897959%; / * 240/784 * /
маржа: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
поле праворуч: 0;
}
}

Зверніть увагу, що нам не потрібно переписувати всі стилі, необхідні для мініатюри, всередині цього медіа-запиту, а лише ті частини, які ми хочемо адаптувати.

Переглядаючи цю зміну у браузері, ви помітите, що праворуч від кожної другої мініатюри немає поля. Це тому, що наступне правило CSS все ще залишається активним:

ol.media li.media-item: nth-child (2n) {
поле праворуч: 0;
}

Нам потрібно змінити CSS у нашому медіа-запиті, щоб скинути це значення:

Екран @media та (мінімальна ширина: 35em) {
.media-item {
ширина: 30,612244897959%; / * 240/784 * /
маржа: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
поле вправо: 4,081632653061%;
}
.media-item: nth-child (3n) {
поле праворуч: 0;
}
}

Створюючи медіа-запити, завжди пам’ятайте про такі проблеми успадкування.

06. Не тільки ширина

Важливо думати про медіа-запити не лише з точки зору ширини, а й інших змінних. Наприклад, відео на нашій сторінці медіафайлів частково приховано, коли висота вікна перегляду зменшується. Ми маємо технологію:

.media-object-wrapper {
підкладка-дно: 56,25%;
ширина: 100%;
висота: 0;
положення: відносне;
}
Екран @media та (максимальна висота: 35em) та (орієнтація: альбомний) {/ * 560px * /
.media-object-wrapper {
ширина: 60%;
прокладка-дно: 33,75%;
}
}

Я навіть включив запит орієнтації для подальшого вдосконалення цієї поведінки.

Ми можемо дотримуватися подібного підходу для інших частин нашого дизайну, міняючи місцями більшу версію заголовка та переміщуючи навігаційні посилання у верх сторінки, як тільки стане вільним місцем.

• Перегляньте нашу адаптивну домашню сторінку
• Перегляньте нашу адаптивну сторінку медіа-матеріалів

І ось у нас це є! Ми створили адаптивний веб-сайт - і з вільним днем! Ну, не зовсім. Гнучкі макети, зображення та медіа-запити - це лише початок процесу адаптивного дизайну.

Завтра: У заключній частині цього підручника ми вийдемо за межі адаптивного веб-дизайну та розглянемо, як ми можемо створити справді адаптивні веб-сайти.

Пол - дизайнер взаємодії, який базується в Брайтоні, Англія. Він найщасливіший при розробці простих, але цікавих інтерфейсів, які є рідними для Інтернету.