Подивіться на точки зверху. Деякі з них злипаються, а інші розташовані один від одного на відстані, бачите? Я хочу, щоб ви розбили їх на 5 груп так, як ви вважаєте за потрібне.
Давайте. Переконайтеся, що ніхто не дивиться, і намалюйте п'ять гуртків своїми дитячими пальчиками.
Швидше за все, ви обвели точки приблизно, як показано нижче, так адже? І тільки не кажіть, що прокрутили станицю вниз, не обвівши точки. У мене тоді буде фейспалм.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Крайні справа дві точки можна було б об'єднати і по-іншому. Якщо ви обвели їх разом, нічого страшного. Кажуть, що тут не існує неправильної відповіді.
Перш ніж я продовжу, хочу запитати, чи не пробували ви обвести точки так?
Швидше за все, немає, правильно?
Але саме це і потрібно було б зробити, якби вам потрібно було поставити брейкпоінт в місцях, які збігаються з точною шириною екрану популярних пристроїв (320px, 768px, 1024px).
Чи чули ви коли-небудь або вимовляли цитату нижче? «Середній брейкпоінт доходить до 768px або включає 768? Так-так ... це альбомного формату на iPad або large? Ой, large адже це 768px і вище. Зрозуміло. А small тоді 320px? Для кого тоді діапазон від 0 до 319px? Для комах? »
Я міг би показати вам правильні брейкпоінт і все, але мені цікаво, чому цей дивний метод угруповання отримав таку популярність.
Чому розміри повинні бути саме такими?
Я думаю, що відповідь на це питання, як і на багато інших проблем, криється в неправильному розумінні термінології. Зрештою, всі ми знаємо жарт про приплив в Гуантанамо. Звучить шикарно, якщо не знаєш, що це значить. (Шкода, що цей жарт придумав не я.) У в'язниці в Гуантанамо в'язнів катували, імітуючи втоплення припливом.
Мені здається, ми змішуємо поняття меж і діапазонів, коли обговорюємо і створюємо брейкпоінт.
Скажіть, якщо ви робите брейкпоінт в Sass, створювали ви змінну $ large зі значенням 768px?
Це нижня або верхня межа, яку ви відносите до large? Якщо нижня, то у вас не повинно бути $ small, так як вона повинна бути дорівнює 0, але ж?
А якщо це верхня межа, як би ви задали змінну $ large-and-up? Потрібно створити медіа запит з min-width рівним $ medium, правильно?
Якщо ж ви, говорячи про large, розумієте тільки кордону, то ви заплутаєтеся, тому що медіа запити це завжди діапазон.
Повний бардак, на який ми ще витрачаємо час, щоб зрозуміти все. Тому я пропоную:
правильно визначайте брейкпоінт;
давайте діапазонами розумні назви;
Рада №1: правильно визначайте брейкпоінт
Так які ж брейкпоінт правильні? Ви вже намалювали ці кола, представивши себе маленькими. Я просто зроблю з них прямокутники.
600px, 900px, 1200px і 1800px, якщо ви збираєтеся зробити щось особливе для користувачів з дуже великими моніторами. Не по темі, якщо замовляєте великий монітор онлайн, переконайтеся, що він для комп'ютера. Ви ж не хочете отримати поштою гігантську ящірку.
Ті точки, з якими ви грали, коли були маленьким, насправді являють собою 14 найбільш поширених розмірів екранів:
Можна створити досить маленьку картину того, які екрани використовують бізнесмени, дизайнери, розробники і тестувальники.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Рада №2: давайте діапазонами розумні назви
Можна називати брейкпоінт papa-bear і baby-bear, якщо хочете. Але якщо я сяду з дизайнером обговорити зовнішній вигляд сайту на різних пристроях, я хочу, щоб наша розмова закінчилася якомога швидше. Якщо назва portrait tablet допоможе мені прискорити розмову, я буду радий. Так я навіть пробачив, якби ви назвали розмір «iPad portrait».
Термін придатності CSS на сайті становить в середньому 3 роки (якщо це не Gmail). iPad подвоївся за цей час, і його досі використовують. Ми ж знаємо, що Apple більше не робить нових продуктів, вони просто прибирають щось з існуючих речей (кнопки, отвори і т.д.).
Хлопців, 1024х768 нікуди не дінеться. Давайте не будемо ховати голову в пісок. Кумедний факт: страуси не жила в містах, тому що там немає піску, нікуди ховатися від хижаків.
Висновок: зв'язок дуже важлива. Чи не відривайте себе цілеспрямовано від корисної лексики.
Рада №3: будьте декларативні
Знаю-знаю, «декларативні», це слово, знову. Скажу по-іншому: ваш CSS повинен визначати те, що необхідно зробити, а не як це має статися. Слово «як» більше відноситься до якихось дрібниць в Міксини.
Як я вже говорив вище, плутанину навколо брейкпоинтов частково викликає те, що змінні, які визначають межі діапазону, використовуються в якості назви цього діапазону. $ Large: 600px-якщо large це діапазон, то такий запис не має сенсу. Те ж саме, що сказати var coordinates = 4 ;.
Такі речі можна ховати в міксини, а не залишати в коді. Можна зробити ще краще і взагалі не використовувати змінні.
Спочатку я написав код нижче як спрощений приклад. Але насправді я думаю, що цей код охоплює всі основні моменти. Можна подивитися в дії на CodePen. Я використовував Sass, не можу уявити собі розробку сайту без нього. В CSS або LESS логіка така ж.
Може, мій погляд упереджений, але це приклад добре декларованого CSS коду. Зверніть увагу, що я змушую розробників використовувати суфікси -up і -only.
Двозначність породжує плутанину.
Зрозуміло, що цей код не працює з одними медіа запитами. Але є хороші новини: хочете призначені для користувача медіа запити, пишіть призначені для користувача медіа запити. На ділі, якщо мені потрібен більш складний код, я просто переходжу на Susy.
Також код можна розкритикувати за 8 Міксини. Можна все переписати в один миксин і передавати необхідний розмір, ось так:
Код працює, але якщо передати непідтримуваний назву, ви не отримаєте помилок під час компіляції. Щоб передати Sass змінну, нам знадобиться 8 змінних, між якими потрібно перемикатися в Міксини.
Не кажучи вже про те, що синтаксис @include for-desktop-up набагато красивіше, ніж @include for-size (desktop-up).
Мінусом в двох шматках коду буде те, що я двічі використовую 900px, а також 899px. Потрібно просто використовувати змінні і віднімати одиницю за потребою.
Хочете так зробити, вперед, але я б не став. З двох причин:
Ці цифри не так часто змінюються, і вони не використовуються десь ще в коді. Проблем не виникне, якщо ці цифри не уявити у вигляді змінних. Якщо, звичайно, ви не відкриєте свій Sass код скрипту, який вставляє JS об'єкт з цими змінними на сторінку.
Жахливий синтаксис, якщо потрібно перетворити цифри в рядки за допомогою Sass. Нижче показана плата за віру в те, що повторення чисел - це найгірше з зол:
Ну і так як я в останніх параграфах трохи підвищив тон ... Мені шкода тих дурнів, які займаються фокусами типу зберігання брейкпоинтов в Sass списку і подальшого виведення медіа запитів через цикл. Ну або щось в такому дусі, щоб майбутнім розробникам довелося розшифровувати їх код.
Баги криються в складнощах.
Нарешті, ви можете подумати: «а чи не повинен я визначати брейкпоінт по контенту, а не пристроїв?». Здивований, що ви так далеко зайшли, і відповідь буде так ... для сайтів з одним макетом. Ну або якщо у вас багато макетів, і ви не проти задавати різні брейкпоінт для всіх макетів. Також відповідь буде так, якщо дизайн на вашому сайті змінюється досить рідко, або ви хочете поміняти все брейкпоінт при оновленні дизайну, щоб вони ґрунтувалися на контенті.
На складних сайтах можна взяти кілька брейкпоинтов і використовувати їх, все набагато простіше.
Бонусні поради по розробці брейкпоинтов
Навіть на flickr брейкпоінт на 768 і 1400
Якщо вам потрібно підібрати CSS брейкпоінт для екрану більшого розміру, ніж той, за яким ви зараз сидите, використовуйте адаптивний режим в панелі розробника Chrome, там можна вказати будь-який розмір.
Блакитна смуга показує max-width медіа запити, помаранчева - min-width медіа запити, зелена панель показує min і max медіа запити.
Якщо клікнути на медіа запит, ширина екрану зміниться на зазначену в запиті. Два кліка по зеленій панелі перемикають між мінімальною і максимальною шириною.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
