Создание адаптивных макетов без медиа запросов

Sep 15, 2025

Инструкции

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

Эта статья в основном о творческом развитии, таким образом, это для обоих: разработчиков переднего конца, которые могут найти эту технику полезными, а веб-дизайнеры, которые должны иметь общее понимание веб-продукции и как улучшить окончательный выход. Я предполагаю, что вы уже знаете о CSS, точках останова и медиа-запросов.

Построить блог с сеткой и Flexbox

Традиционный путь

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

Портативные устройства захватывают мир. Разнообразие всех видов устройств меняют способ создания веб-сайтов. «Отзывчивый сайт» большинство людей предполагают только настольные и мобильные версии (иногда настольные, планшетные, мобильные). Вот как это работает традиционно:

 H1 {
Размер шрифта: 80px;
}
.container {
Ширина: 980px;
Маржа: 0 авто;
}

@media (Макс-Ширина: 1023px) {
h1 {
Размер шрифта: 48PX;
}
.container {
Ширина: Авто;
прокладки: 0 30 час;
}
}

На самом деле, обычно Макет сайта Мы видим, не сделано для нашего устройства. Например, давайте посмотрим, как мы отрегулируем размер шрифта и LT; H1 & GT; заглавие:

Adaptive layouts — С одной точкой останова вы можете в конечном итоге со странными разными пунктами

Вы видите, наши & lt; h1 & gt; Название имеет «размер шрифта: 48PX» на устройстве ширины 320PX и 800px, а также «размер шрифта: 80px» на 1024Px и 2560px.

Конечно, мы можем добавить больше точек останова, но количество разных устройств бесчислено! Это будет создание спецификации дизайна очень сложным и запутанным, потому что трудно узнать, какое значение применяется к какому экрану.

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

Что нам действительно нужно, это так:

Устройства просмотра

Adaptive layouts: viewpoint units — Устройства просмотра пособия улучшают вопросы, но им все еще нужна работа

Решение этой проблемы включает в себя блоки просмотра VW и VH. Это блоки длины, представляющие 1/100-е место ширины / высоты Viewport (широко поддерживается браузерами из IE9 +).

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

 H1 {
Размер шрифта: Calc ((80/1920) * 100VW;
}
.container {
Ширина: 80 Вт;
Маржа: 0 авто;
}

@media (Макс-Ширина: 1023px) {
h1 {
Размер шрифта: Calc ((48/375) * 100VW;
}
.container {
Ширина: 90 Вт;
}
}

Мы никогда не знаем, если это слишком большой или слишком маленький.

Как мы можем построить настоящую адаптивную систему макета? Как мы проектируем отзывчивый веб-сайт, который работают от 320PX до 2560px?

В идеале ваш макет должен объяснить логику за макетом, и как она адаптируется от меньшего разрешения, чтобы больше:

Решение

Adaptive layouts: solution — Вот как сделать по-настоящему адаптивную систему макета

Мы хотим постоянно регулировать свойства с небольшого экрана до большого. Нет точек останова и никаких медиапроводов. То, что мы хотим, - это одно значение, которое работает для каждого дисплея.

Математическая функция с двумя переменными является ключ. Например, если мы хотим настроить размер шрифта заголовка, функция должна выглядеть так:

1920x + Y = 80
375x + Y = 48

1920 - ширина рабочего стола по умолчанию в дизайн-макете (равно 100 Вт)
375 - По умолчанию мобильная ширина в дизайне макета (равно 100 Вт)
80 - желаемый размер шрифта H1 на рабочем столе
48 - желаемый размер шрифта H1 на мобильном

Это значения X и Y:

x = (80 - 48) / (1920 - 375)
х = 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 на 100 Вт:
100VW * x + y = желаемое значение

Заменить x и y со значениями:
100VW * 0,0207 + 40.256 = желаемое значение

Мы получаем последний стиль CSS:

 H1 {размер шрифта: Calc (2.07VW + 40,25PX)}

Удивительно достаточно, что, наконец, работает только то, как мы хотели!

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

Давайте попробуем построить фактический макет, используя эту технику:

Но этот подход имеет один недостаток: трудно понять, какая ценность стоит за этой функцией CALL. Как мы можем это упростить?

Если вы используете HTML Daily, вы, вероятно, знакомы с предварительно процессорами SASS / SCSS. Вот небольшая помощь для вас: давайте сделаем «микс» и сделайте все эти расчеты автоматически, и все равно сохраняют наши исходные значения.

Это та же функция, как описано выше, но сделано как Sass Mixin:

 $ дисплей: 1920
$ SPORT-узкий: 375

@mixin fluid ($ Свойство, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ дисплей - шириной - $ узкий)
  $ Y: $ maxvalue - $ дисплей * $ x
  # {$ Свойство}: calc (# {100 * $ x} vw + # {$ y y} px)

H1.
  @include жидкость (размер шрифта », 48,80)

.контейнер
  @include жидкость ('Ширина', 315,1580)
@include жидкость ('padding', 30,60)

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

Эта техника Обеспечивает очень сложное решение, чтобы наконец строить действительно отзывчивые веб-макеты. Он поддерживает большинство браузеров, обеспечивает правильность вашего проекта для посетителей, упрощает структуру ваших стилей, и наиболее важно, делает ваш веб-макет последовательным и логичным. Я надеюсь, что это может помочь вам запустить несколько удивительных веб-проектов.

Статьи по Теме:

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

Создание адаптивных макетов без медиа запросов

Традиционный путь

Устройства просмотра

Решение

Инструкции - Самые популярные статьи

Как сделать фотоколлаж в Photoshop CC

Animate SVG с JavaScript

Как добиться масштаба в ваших картинах

Step-by-step: How to mimic oil paint in Corel Painter

Конструктор Affinity: Как использовать Pixel Persona

Как управлять классами CSS с JavaScript

Покрасить портрет как Ван Гог

Как покрасить магические светящиеся руны

Категории