Mobile-first CSS

11 хв. читання

Створення адаптивних веб-сайтів - обов'язкове вміння для кожного 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; 
      }
    }

У наведеному вище прикладі, буде мати червоний фон, якщо ширина буде менше 600px. Фон зміниться на зелений при ширині 600px або більше.

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

Цей підхід використовує max-width.

Приклад:

    // 600px і більше
    body { 
      background: green; 
    }
    
    // Від 0px до 600px
    @media (max-width: 600px) {
      body { 
        background: red; 
      }
    }

У наведеному вище прикладі, буде мати зелений фон для будь-якої ширини, але, якщо ширина буде менше 600px, фон зміниться на червоний.

Чому Mobile-first краще?

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

Розглянемо ситуацію, коли у вас є сайдбар. .content займає 100% ширини на мобільному і 66% \- на десктопі.

mobile-first css

У більшості випадків, ми можемо покладатися на властивості за замовчуванням для стилювання контенту для невеликих екранів. У цьому випадку <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 - на великому.

mobile-first css

Це просто, оскільки відсутні пробіли між кожним елементом:

    .gallery__item {
      float: left; 
      width: 33.33%; 
      @media (min-width: 800px) {
        width: 25%; 
      }
    }

Це стає трохи складніше, якщо є пустий простір, в межах кожного елемента.

mobile-first css
Нехай це буде 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; 
        }
      }
    }

mobile-first

Це не працює належним чином, тому що ми визначили, що кожен 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; 
        }
      }
    }

mobile-first css

Це працює, оскільки 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; 
        }
      }
    }

mobile-first css

Висновок

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

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація