doka-guide · solarrust · Aug 27, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024
diff --git a/css/mobile-first-vs-desktop-first/demos/adaptive-layout/index.html b/css/mobile-first-vs-desktop-first/demos/adaptive-layout/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>DEMO — Mobile-first vs Desktop-first — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: Roboto, sans-serif;
+      margin: 0;
+      background-color: #18191c;
+    }
+
+    main {
+      margin: 8px;
+    }
+
+    h1 {
+      text-align: center;
+      color: #2E9AFF;
+    }
+
+    .container {
+      display: flex;
+      row-gap: 8px;
+
+      flex-direction: column;
+    }
+
+    @media (min-width: 640px) {
+      .container {
+        flex-direction: row;
+        column-gap: 8px;
+      }
+    }
+
+    .card {
+      padding: 55px 40px;
+      border: 1px solid black;
+      text-align: center;
+      border-radius: 4px;
+      background-color: #2E9AFF;
+    }
+  </style>
+</head>
+
+<body>
+  <main>
+    <h1>Факты про кошек</h1>
+    <section class="container">
+      <article class="card">
+        В каждом кошачьем ухе находится более чем 30 мускулов.
+      </article>
+      <article class="card">
+        В среднем, коты спят по 16-18 часов в день, что составляет более 70% кошачьей жизни.
+      </article>
+      <article class="card">
+        Кошки не чувствуют вкуса сладкого.
+      </article>
+      <article class="card">
+        У кошек и людей за управление эмоциональным состоянием отвечают одинаковые отделы головного мозга.
+      </article>
+    </section>
+  </main>
+</body>
+
+</html>
@@ -0,0 +1,85 @@
+---
+title: "Mobile-first vs Desktop-first"
+description: "Mobile-first или Desktop-first?"
+authors:
+  - rezn1kovAndrey
+contributors:
+  - reznikovandrey
+related:
+  # TODO
+  - ""
+tags:
+  - article
+---
+
+## Кратко
+_Mobile-first_ и _Desktop-first_ — это подходы к веб-дизайну и разработке, которые определяют то, для каких устройств начинается проектирование дизайна и разработка в первую очередь.
+
+Из-за возросшей популярности мобильных устройств, _Mobile-first_ подход в современном вебе имеет более широкое распространение, однако, существуют определенные типы приложений (CRM / ERP системы, различные дашборды), для которых _Desktop-first_ является наиболее подходящим.
+
+## Как понять
+Особенности _Mobile-first_ подхода:
+- минималистичные интерфейсы;
+- с точки зрения UX фокус на **мобильные сценарии использования** (сенсорное взаимодействие, навигация одной рукой);
+- **прогрессивное расширение ([Progressive Enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement))** функций и интерфейсов с увеличением размера экрана.
+
+Особенности _Desktop-first_ подхода:
+- насыщенные интерфейсы;
+- с точки зрения UX фокус на **использование пользователем клавиатуры и мыши**;
+- **изящная деградация ([Graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation))** функций и интерфейсов с уменьшением размера экрана.
+
+## Как пишется
+Представим, что нам необходимо сверстать страницу с карточками, которые в десктопной версии располагаются в ряд, а в мобильной - в колонку.
+
+Условимся, что делить устройства в зависимости от ширины экрана мы будем следующим образом:
+- мобильные устройства `< 640px`;
+- `640px <=` планшеты `< 1024px`;
+- десктопные устройства `>= 1024px`.
+
+#### Mobile-first
+Прописываем стили для мобильного устройства, а далее с помощью [медиа-выражений](/css/media/) и свойства `min-width` дополняем стили.
+
+```css
+  /* стили для мобильной версии */
+  .container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+  }
+
+  /* здесь могли бы быть дополнительные стили для планшетной версии */
+  @media (min-width: 640px) {}
+
+  /* стили для десктопной версии */
+  @media (min-width: 1024px) {
+    .container {
+      flex-direction: row;
+      column-gap: 8px;
+    }
+  }
+```
+
+#### Desktop-first
+Прописываем стили для десктопного устройства, а далее с помощью [медиа-выражений](/css/media/) и свойства `max-width` дополняем стили.
+
+```css
+  /* стили для десктопной версии */
+  .container {
+    display: flex;
+    flex-direction: row;
+    column-gap: 8px;
+  }
+
+  /* здесь могли бы быть дополнительные стили для планшетной версии */
+  @media (max-width: 1023px) {}
+
+  /* стили для мобильной версии */
+  @media (max-width: 639px) {
+    .container {
+      flex-direction: column;
+      row-gap: 8px;
+    }
+  }
+```
+
+<iframe title="Адаптивная верстка" src="demos/adaptive-layout/" height="300"></iframe>
@@ -0,0 +1,3 @@
+Современные CSS-фреймворки и UI-библиотеки в большинстве своем также придерживаются _Mobile-first_ подхода:
+- [Tailwind](https://tailwindcss.com/docs/responsive-design#working-mobile-first)
+- [Material UI](https://mui.com/material-ui/getting-started/usage/#responsive-meta-tag)