Mobile-first CSS
Сьогодні, створення реагуючих (адаптивних) веб-сайтів - це обов'язкове вміння для кожного front-end розробника. Коли ми говоримо про такі веб-сторінки, на думку відразу ж спливає термін mobile.
Всі ми знаємо про важливість проектування з перспективою мобільної підтримки. На жаль, набагато менше ми задумуємось про про написання mobile-first.
Сьогодні я хотів би поділитися з вами думками про mobile-first підхід до стилізації, чому цей підхід набагато краще, і як працює.
Примітка: ця стаття буде дуже корисна, якщо ви практикуєте створення реагуючих макетів з Susy.
Mobile-first і Desktop-first?
Давайте розглянемо відмінності між цими двома підходами.
Mobile-first підхід до стилізації означає, що стилі застосовуються в першу чергу для мобільних пристроїв. Додаткові стилі та інші перевизначення для великих екранів додаються в таблицю стилів за допомогою медіа запитів потім.
Цей підхід використовує медіа запити min-width.
Ось невеликий приклад:
// Від 0px до 600px
body {
background: red;
}
// 600px і більше
@media (min-width: 600px) {
body {
background: green;
}
}
У наведеному вище прикладі, <body> буде мати червоний фон, якщо ширина буде менше 600px. Фон зміниться на зелений при ширині 600px або більше.
Desktop-first підхід до стилізації означає, що стилі будуть застосовані в першу чергу для настільних пристроїв. Додаткові стилі та інші перевизначення для великих екранів додаються в таблицю стилів за допомогою медіа запитів потім.
Цей підхід використовує max-width.
Приклад:
// 600px і більше
body {
background: green;
}
// Від 0px до 600px
@media (max-width: 600px) {
body {
background: red;
}
}
У наведеному вище прикладі, <body> буде мати зелений фон для будь-якої ширини, але, якщо ширина буде менше 600px, фон зміниться на червоний.
Чому Mobile-first краще?
Код для великих екранів, як правило, більш складний, ніж для невеликих. Коротко кажучи, mobile first допомагає спростити код.
Розглянемо ситуацію, коли у вас є сайдбар. .content займає 100% ширини на мобільному і 66% - на десктопі.
У більшості випадків, ми можемо покладатися на властивості за замовчуванням для стилювання контенту для невеликих екранів. У цьому випадку <div> має ширину 100%.
Якщо ми застосуємо mobile first підхід, Sass код буде таким:
.content {
// Значення для маленьких екранів
// Нічого не зазначено, так я використовуються стилі за замовчуванням
// Значення для великих екранів
@media (min-width: 800px) {
float: left;
width: 60%;
}
}
Якщо ми використаємо desktop-first, ми повинні будемо встановити властивості за замовчуванням для невеликих екранів. Один і той же результат:
.content {
// Значення для великих екранів
float: left;
width: 60%;
// Значення для маленьких екранів
// Зазначте, що нам потрібно вказати два значення за замовчуванням для коректної роботи макета
@media (max-width: 800px) {
float: none;
width: 100%;
}
}
З цим прикладом, ми економимо два рядки коду CSS. Уявіть, скільки це часу і зусиль, якщо ви працюєте над великим проектом.
Для більшості задач min-width запитів буде достатньо для розробки web-сайту. Існують, однак, випадки, коли комбінація обох min-width і max-width запитів дозволяє усунути складнощі, вирішення яких складно досягти тільки з min-width запитами.
Давайте розглянемо декілька прикладів.
Max-width запити з Mobile-first
Max-width запити стають схожими на гру, коли ви хочете, щоб стилі бути обмежені певним розміром області перегляду. Поєднання min-width і max-width допоможе обмежити стилювання між двома різними значеннями області перегляду.
Розглянемо такий випадок, як галерея мініатюр. Ця галерея має 3 іконки в ряд на маленькому екрані та 4 - на великому.
Це просто, оскільки відсутні пробіли між кожним елементом:
.gallery__item {
float: left;
width: 33.33%;
@media (min-width: 800px) {
width: 25%;
}
}
Це стає трохи складніше, якщо є пустий простір, в межах кожного елемента.
Нехай це буде 5% ширини
.gallery__item {
float: left;
width: 30.333%;
margin-right 5%;
}
Ми також повинні задати остаточному (3 елементу) margin-right 0, щоб переконатися, що він не переходить у наступну колонку:
.gallery__item {
float: left;
width: 30.333%;
margin-right 5%;
&:nth-child(3n) {
margin-right: 0;
}
}
Цей код також повинен працювати для варіанту з чотирма позиціями в рядку. Якщо б ми скористались min-width, то отримали б:
.gallery__item {
float: left;
width: 30.333%;
margin-right 5%;
&:nth-child(3n) {
margin-right: 0;
}
@media (min-width: 800px) {
width: 21.25%; // (100% - 15%) / 4
&:nth-child (4n) {
margin-right: 0;
}
}
}
Це не працює належним чином, тому що ми визначили, що кожен 3-й пункт повинен мати margin-right 0px. Але ця властивість ламає шаблон.
Ми можемо виправити це шляхом скидання властивість margin-right кожного 3-го елемента до 5%:
.gallery__item {
// ...
@media (min-width: 800px) {
// ...
&:nth-child (3n) {
margin-right: 5%;
}
&:nth-child(4n) {
margin-right: 0%;
}
}
}
Це не дуже хороший підхід, оскільки нам потрібно буде дублювати margin-right 5%, якщо ми вирішимо змінити кількість елементів на великому екрані.
Ми повинні тримати код максимально сухим.
Кращий спосіб - це обмежити nth-child(3n) селектор за допомогою max-width.
.gallery__item {
float: left;
margin-right 5%;
@media (max-width: 800px) {
width: 30.333%;
&:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: 800px) {
width: 21.25%; // (100% - 15%) / 4
&:nth-child (4n) {
margin-right: 0;
}
}
}
Це працює, оскільки max-width обмежує селектори нижче 800px і стилі не впливають на інші розміри.
А тепер уявіть, якщо у вас велика область перегляду і ви хочете показати 5 елементів в ряд в галереї. Тут ми і використаємо min і max-width запити разом.
.gallery__item {
float: left;
@media (max-width: 800px) {
width: 30.333%;
margin-right 5%;
&:nth-child(3n) {
margin-right: 0;
}
}
// комбінація min-width і max-width
@media (min-width: 800px) and (max-width: 1200px) {
width: 21.25%; // (100% - 15%) / 4
&:nth-child (4n) {
margin-right: 0;
}
}
@media (min-width: 1200px){
width: 16%; // (100% - 20%) / 5
&:nth-child (5n) {
margin-right: 0;
}
}
}
Висновок
Min-width - дуже корисна річ, коли справа доходить до створення реагуючих веб-сайтів, тому що це зменшує складність коду. Min-width, однак, не вирішує всіх проблем, ви можете побачити це з наведених вище прикладів. Іноді, додавання max-width на вашу таблицю стилів може бути вірним рішенням, так як це допомагає тримати код сухішим.
508 4
GR: 4.458k
Коментарі: