Создаете адаптивный веб-сайт с цветовыми темами? Лучше начать с корня
Если вам случится посетить мой веб-сайт, вы можете заметить, что я немного его привел в порядок. Victoria.dev теперь может лучше реагировать на ваши устройства и предпочтения!
Вот как использовать медиа-запросы CSS и настраиваемые свойства, чтобы улучшить работу посетителей в Интернете с помощью всего нескольких строк CSS.
Удовлетворение предпочтений по цвету
Можно запросить prefers-color-scheme
медиа-функцию, чтобы предоставить выбранную пользователем цветовую схему. Вариант light
- это подходящая версия, если не установлено никаких активных предпочтений, и она имеет достойную поддержку в современных браузерах.
Кроме того, пользователи, читающие на определенных устройствах, также могут устанавливать светлые и темные цветовые темы по расписанию. Например, мой телефон использует светлые цвета во всем пользовательском интерфейсе днем и темные цвета ночью. Вы можете сделать так, чтобы ваш сайт последовал этому примеру!
Избегайте частого повторения CSS, задав настраиваемые свойства для ваших цветовых тем в псевдоклассе :root
. Создайте версию для каждой темы, которую хотите поддерживать. Вот небольшой пример, на котором вы можете опираться:
Как видите, вы можете использовать настраиваемые свойства для установки всех видов значений. Чтобы использовать их как переменные с другими элементами CSS, используйте var()
function:
header {
color: var(--text-primary);
background-color: var(--background);
box-shadow: var(--shadow);
}
В этом быстром примере элемент header
теперь будет отображать предпочтительные цвета вашего пользователя в соответствии с настройками его браузера!
Fire Fox
Вы можете протестировать режимы light
и dark
в Firefox, набрав about:config
в адресной строке. Примите предупреждение, если оно появится, затем введите ui.systemUsesDarkTheme
в поиск.
Выберите значение Number
для настройки, затем введите 1
для темноты или 0
для света:
Храбрый
Если вы используете Brave, найдите настройки цветовой темы в Настройки ›Внешний вид› Brave colors:
Переменное масштабирование
Вы также можете использовать настраиваемое свойство, чтобы легко настроить размер текста или других элементов в зависимости от размера экрана вашего пользователя. width
медиа-функция проверяет ширину области просмотра. Хотя width: _px
будет соответствовать точному размеру, вы также можете использовать min
и max
для создания диапазонов.
Запрос с min-width: _px
для соответствия чему-либо более _
пикселей и max-width: _px
для соответствия чему-либо размером до _
пикселей.
Используйте эти запросы, чтобы установить настраиваемое свойство на :root
для создания соотношения:
Затем сделайте элемент адаптивным, используя функцию calc()
. Вот несколько примеров:
В этом примере умножение начального значения на ваше --scale
настраиваемое свойство позволяет размеру заголовков и изображений волшебным образом подстраиваться под ширину устройства вашего пользователя.
Относительная единица rem
будет иметь аналогичный эффект. Вы можете использовать его для определения размеров элементов относительно размера шрифта, объявленного в корневом элементе:
Конечно, вы также можете умножить два настраиваемых свойства. Например, установка --max-img
в качестве настраиваемого свойства на :root
может помочь сэкономить ваше время в дальнейшем, поскольку вам не придется обновлять значение пикселя в нескольких местах:
img {
max-width: calc(var(--max-img) * var(--scale));
}
Повысьте свою отзывчивость
Попробуйте эти простые победы для веб-сайта, который обслуживает устройства и предпочтения ваших посетителей. Я нашел им хорошее применение на victoria.dev. Дайте знать, понравилось ли вам!
Спасибо за прочтение!