Побудуйте адаптивні макети без засобів масової інформації

Sep 13, 2025

Як

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

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

Побудувати блог з сіткою та flexbox

Традиційний шлях

Adaptive layouts: breakpoints — Місцеві точки можуть призвести до незадовільних результатів для нестандартних перегляду

Портативні пристрої беруть у світ. Різноманітність всіх видів пристроїв змінюють спосіб створення веб-сайтів. За допомогою "чутливого веб-сайту" більшість людей припускають лише настільні та мобільні версії (іноді робочий стіл, планшет, мобільний). Ось як це традиційно працює:

 H1 {
шрифт: 80px;
}
.container {
Ширина: 980px;
маржа: 0 AUTO;
}

@Media (Max-ширина: 1023px) {
h1 {
Шрифт-розмір: 48px;
}
.container {
Ширина: Авто;
Прокладка: 0 30px;
}
}

Насправді, як правило, Макет веб-сайту Ми бачимо, що це не зроблено для нашого пристрою. Наприклад, давайте подивимося, як ми налаштуємо розмір шрифту & lt; h1 & gt; Назва:

Adaptive layouts — За допомогою однієї точки зупинки ви можете закінчити дивні розміри точки

Ви бачите, наш & lt; h1 & gt; Назва має "шрифт-розмір: 48px" на пристрої ширини 320px та 800px та "шрифт-розмір: 80px" на 1024PX та 2560px.

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

Adaptive layouts: font size — Ви ніколи не можете створювати достатньо зупинок, щоб отримати розмір шрифту, який ідеально підходить на кожному екрані

Що нам дійсно потрібно:

Підрозділи перегляду

Adaptive layouts: viewpoint units — Підрозділи перегляду покращують питання, але вони все ще потребують роботи

Рішення цієї проблеми передбачає одиниці VODESPORT VW та VH. Це довжини, що представляють 1/100-й ширину / висоту перегляду (широко підтримуються браузерами з IE9 +).

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

 H1 {
Шрифт-розмір: Calc ((80/1920) * 100VW;
}
.container {
Ширина: 80vw;
маржа: 0 AUTO;
}

@Media (Max-ширина: 1023px) {
h1 {
Шрифт-розмір: Calc ((48/375) * 100VW;
}
.container {
Ширина: 90в.
}
}

Ми ніколи не знаємо, якщо це занадто велика або занадто мала.

Як ми можемо побудувати справжню систему адаптивної макети? Як ви розробляємо чуйний веб-сайт, який працює на 100-220px до 2560 пікселів?

В ідеалі, ваш макет повинен пояснити логіку за макетом, і як він адаптує з меншого дозволу на більший:

Рішення

Adaptive layouts: solution — Ось як зробити справді адаптивну систему макету

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

Функція математики з двома змінами є ключем. Наприклад, якщо ми хочемо налаштувати розмір шрифту заголовка, функція повинна виглядати так:

1920x + y = 80
375x + y = 48

1920 - Ширина робочого столу за замовчуванням у макеті дизайну (дорівнює 100VW)
375 - Мобільна ширина за умовчанням у макеті дизайну (дорівнює 100VW)
80 - Бажаний розмір шрифту H1 на робочому столі
48 - Бажаний розмір шрифту H1 на мобільному телефоні

Це значення x та y:

x = (80 - 48) / (1920 - 375)
x = 0.0207

y = 80 - 1920 * 0.0207
y = 40.256

Щоб використовувати ці значення, нам знадобиться функція Calc CSS для виконання розрахунків на веб-сторінці (широко підтримується браузерами з IE9 +). Ми повинні розраховувати x * 100 разів (тому, що 1VW блок = 1/100-го від ширини перегляду).

Ми беремо нашу оригінальну функцію:
1920x + y = 80
375x + y = 48

Замінити 1920 з 100VW:
100vw * x + y = бажане значення

Замінити x і y з значеннями:
100VW * 0.0207 + 40.256 = Бажане значення

Ми отримуємо остаточний стиль CSS:

 H1 {шрифт-розмір: Calc (2.07VW + 40.25px)}

Дивно, що, нарешті, працює, як ми хотіли!

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

Давайте спробуємо побудувати фактичний макет, використовуючи цю техніку:

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

Якщо ви кодуєте HTML щодня, ви, мабуть, знайомі з попередніми процесорами SASS / SCSS. Ось невелика допомога для вас: давайте зробимо "mixin" і зробити всі ці розрахунки відбуваються автоматично, і все ще зберігайте наші початкові значення.

Це та ж функція, як описано вище, але зроблена як SASS Mixin:

 $ Дисплей: 1920
$ display-large: 375

@mixin рідина ($ власності, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ display-wide - $ display-large)
  $ Y: $ maxvalue - $ display-wide * $ x
  # {$ власності}: Calc (# {100 * $ x} vw + # {$ y} px)

h1
  @Vlude Fluid ("шрифт-розмір", 48,80)

.container
  @include рідина ("ширина", 315,1580)
@Vlude Fluid ("підкладка", 30,60)

Adaptive layouts: mixin — SASS Mixin може зробити весь процес легшим

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

Пов'язані статті:

17 Дійсно корисний підручники з веб-дизайну
Правила резюмної веб-типографії
Створіть реактивний макет з CSS Grid

Побудуйте адаптивні макети без засобів масової інформації

Традиційний шлях

Підрозділи перегляду

Рішення

Як - Найпопулярніші статті

Як намалювати шию та плечі

Створіть текстури з інструментом шаблону шаблону

Створіть світловий текстовий ефект

Як побудувати AR AP

Створіть анімований 3D-ефект

Як працювати з HTML-відео

11 Поради щодо створення водянистого ландшафту в 3D

15 Поради для оптимізації крос-пристроїв

Категорії