Adaptive PX - бесплатный набор CSS переменных, вводящий новую единицу измерения: apx
Никогда прежде адаптивная
вёрстка
не была такой простой!
A
Теперь с apx.css достаточно прописать стили
только для
десктопной и мобильной версии
P
На всех промежуточных разрешениях экрана
макет будет
идеально подстраиваться!
X
Переучиваться не нужно - верстаешь
привычным способом,
как и раньше!
!!
Стек не имеет значения: HTML+CSS,
SCSS, React, Vue,
Angular - что угодно
Листай вниз, чтобы узнать больше
Проблемы, которые решает APX.css
1
Системное масштабирование
искажает вёрстку
искажает вёрстку
Вёрстка может серьезно поплыть,
если у посетителя настроено
увеличение шрифтов в системе
если у посетителя настроено
увеличение шрифтов в системе
На ноутбуках с маленьким экраном
увеличение включено по умолчанию
увеличение включено по умолчанию
Используя подход APX, сайт будет
отображаться 1:1 при любом уровне
системного масштабирования!
отображаться 1:1 при любом уровне
системного масштабирования!
2
Между брейкпоинтов media-queries
сайт выглядит
«как пойдёт»
сайт выглядит
«как пойдёт»
Сложно сказать что сайт выглядит
в точности так,
как его задумали.
А для полного соответствия
нужно поставить слишком много
брейкпоинтов,
и это
неблагодарный труд.
в точности так,
как его задумали.
А для полного соответствия
нужно поставить слишком много
брейкпоинтов,
и это
неблагодарный труд.
Используя подход APX, сайт будет
всегда оптимально
растягиваться,
и на ЛЮБОМ разрешении выглядеть
как на макете! Усилий меньше,
результат лучше!
всегда оптимально
растягиваться,
и на ЛЮБОМ разрешении выглядеть
как на макете! Усилий меньше,
результат лучше!
Просто вместо px ты будешь
использовать apx,
то есть adaptive
pixel, а значения такие же как px!
использовать apx,
то есть adaptive
pixel, а значения такие же как px!
3
На адаптивную вёрстку
уходит много времени
и сил
уходит много времени
и сил
Написать все брейкпоинты, изменить все отступы
и размеры шрифта, сто раз перепроверить.. Знакомо?
и размеры шрифта, сто раз перепроверить.. Знакомо?
Используя подход APX, требуется
сверстать только
десктопный
и мобильный макеты, указывая
размеры
прямо как на макете.
И всё! Только один брейкпоинт!
сверстать только
десктопный
и мобильный макеты, указывая
размеры
прямо как на макете.
И всё! Только один брейкпоинт!
Больше не нужно беспокоиться как
вёрстка
выглядит на разных экранах,
в том числе Retina!
вёрстка
выглядит на разных экранах,
в том числе Retina!
Лучше один раз увидеть,
чем сто раз услышать
чем сто раз услышать
Попробуй изменить ширину экрана
или поставить в системе увеличение шрифтов,
и посмотри, станет ли этот сайт выглядеть хуже!
или поставить в системе увеличение шрифтов,
и посмотри, станет ли этот сайт выглядеть хуже!
Этот сайт свёрстан на технологии apx.css!
Настроить и скачать APX.css
Скачать APX
Можно посетив этот сайт
с компьютера или ноутбука
Также на полной версии сайта
значительно больше информции
с компьютера или ноутбука
Также на полной версии сайта
значительно больше информции
Для SASS/SCSS
Рекомендуется автором!
Если еще не пользуешься
SASS - попробуй, это удобно
Если еще не пользуешься
SASS - попробуй, это удобно
Для CSS
Размер макета десктопной версии:
px
Размер макета мобильной версии:
px
В макете есть планшетная версия?
Да
Нет
Как использовать:
1
Скачай apx.css и подключи в проект как обычный CSS файл
2
Верстай десктопную версию указывая размеры отступов,
шрифта, и всего остального
в пикселях точно такие же
как
в макете, но вместо px
пиши var(--apx-N)
где N - значение в px
3
Открой проект в браузере, и уменьшай ширину экрана.
Когда контент станет настолько
мал, что его сложно будет
читать, значит на этой ширине нужно
поставить брейкпоинт
media-query.
Внимание: в media-query
max-width не нужно
использовать apx-переменную, пиши значение
в px!
4
При вёрстке мобильной версии точно так же указывай
размеры
как в макете, но используй
другую переменную,
а именно var(--apx-m-N)
где N - значение в px
Как это работает?
И почему так?
Формула базируется
на VW-единицах
на VW-единицах
APX отталкивается от того, сколько
занимает пиксель на нужной нам
ширине
экрана, и мы верстаем,
указывая размеры в пикселях,
в соответствии с макетом.
Далее формула на каждой ширине
экрана отображает макет так,
как он задумывался
дизайнером.
Вот так просто!
занимает пиксель на нужной нам
ширине
экрана, и мы верстаем,
указывая размеры в пикселях,
в соответствии с макетом.
Далее формула на каждой ширине
экрана отображает макет так,
как он задумывался
дизайнером.
Вот так просто!
Почему это просто и удобно?
Разумеется ты можешь использовать
vw-единицы без APX. Но тогда придётся
каждый раз
считать в калькуляторе или
смотреть “на глаз” сколько занимает
тот или иной элемент.
А с APX.css достаточно просто писать
такие же размеры как в пикселях
на макете.
vw-единицы без APX. Но тогда придётся
каждый раз
считать в калькуляторе или
смотреть “на глаз” сколько занимает
тот или иной элемент.
А с APX.css достаточно просто писать
такие же размеры как в пикселях
на макете.
А ещё в большинстве случаев нам
достаточно двух версий: десктопной
и мобильной.
При использовании apx,
макет в зависимости от ширины экрана
будет становиться
больше или меньше,
при этом не искажаясь.
И тебе останется только переключить
версию на мобильную на той ширине,
на которой контент десктопной версии
будет выглядеть слишком мелко.
достаточно двух версий: десктопной
и мобильной.
При использовании apx,
макет в зависимости от ширины экрана
будет становиться
больше или меньше,
при этом не искажаясь.
И тебе останется только переключить
версию на мобильную на той ширине,
на которой контент десктопной версии
будет выглядеть слишком мелко.
Слово автора
Adaptive PX:
