如何使用最少的CSS创建响应式页面和颜色主题

2020年12月30日10:53:52 发表评论 27 次浏览

本文概述

想要建立一个具有色彩主题的响应式网站吗?从根开始。

如果你碰巧访问了我的网站, 你可能会注意到我已经对其进行了一些改进。维多利亚·德夫现在可以更好地响应你的设备和偏好。

大多数现代设备和Web浏览器都允许用户为用户界面选择浅色或深色主题。用CSS媒体查询, 你可以更改自己的网站样式以匹配此用户设置!

媒体查询也是更改网页上的元素以适合不同屏幕尺寸的一种常用方法。当结合使用时, 这是一个特别强大的工具自定义属性设置在根元素.

以下是使用CSS媒体查询和自定义属性来改善访问者的浏览体验的方法, 仅需几行CSS。

如何迎合人们的色彩偏好

的喜欢颜色方案媒体专题可以查询以提供用户选择的配色方案。的光如果未设置活动首选项, 并且该选项具有跨现代浏览器的体面支持.

此外, 在某些设备上阅读的用户还可以根据计划设置浅色和深色主题。例如, 我的手机白天在整个UI中使用浅色, 而晚上则使用深色。你可以使你的网站跟风。

通过在你的颜色主题上设置自定义属性来避免重复很多CSS:根伪类。为你要支持的每个主题创建一个版本。这是一个可以建立的快速示例:

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --text-primary: #24292e;
        --background: white;
        --shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px 0px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: white;
        --background: #24292e;
        --shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px 0px;
    }
}

如你所见, 你可以使用自定义属性来设置各种值。要将这些变量与其他CSS元素一起用作变量, 请使用var() 函数:

header {
    color: var(--text-primary);
    background-color: var(--background);
    box-shadow: var(--shadow);
}

在此快速示例中, 标头元素现在将根据用户的浏览器设置显示其偏好的颜色。

用户根据浏览器以不同的方式设置首选的配色方案。这是几个例子。

Firefox中的明暗模式

你可以测试一下光和黑暗在Firefox中输入以下模式关于:配置进入地址栏。接受警告(如果它弹出), 然后键入ui.systemUsesDarkTheme进入搜索。

选择一个Number设置的值, 然后输入1对于黑暗或0为了光。

在Firefox中设置颜色主题的屏幕截图

勇敢的明暗模式

如果你使用的是《勇敢传说》, 请在设定值>出现>勇敢的色彩.

在《勇敢传说》中设置颜色主题的屏幕截图

如何使用可变比例

你还可以使用自定义属性轻松调整文本或其他元素的大小, 具体取决于用户的屏幕大小。的宽度媒体专题测试视口的宽度。

而宽度:_px将匹配确切的尺寸, 你也可以使用分和最高创建范围。

查询最小宽度:_px匹配任何东西+像素, 以及最大宽度:_px匹配任何东西+像素。

使用这些查询可以在:根建立比率:

@media (min-width: 360px) {
    :root {
        --scale: 0.8;
    }
}

@media (min-width: 768px) {
    :root {
        --scale: 1;
    }
}

@media (min-width: 1024px) {
    :root {
        --scale: 1.2;
    }
}

然后使用calc() 函数。这里有一些例子:

h1 {
    font-size: calc(42px * var(--scale));
}

h2 {
    font-size: calc(26px * var(--scale));
}

img {
    width: calc(200px * var(--scale));
}

在此示例中, 将初始值乘以- 规模自定义属性可让标题和图像的大小神奇地调整为用户设备的宽度。

相对单位雷姆会有类似的效果。你可以使用它来定义相对于在根元素处声明的字体大小的元素大小。

h1 {
    font-size: calc(5rem * var(--scale));
}

h2 {
    font-size: calc(1.5rem * var(--scale));
}

p {
    font-size: calc(1rem * var(--scale));
}

当然, 你也可以将两个自定义属性相乘。例如, 将--max-img作为自定义属性:根不必在多个地方更新像素值, 可以帮助你节省以后的时间:

img {
    max-width: calc(var(--max-img) * var(--scale));
}

提升你的反应能力游戏

尝试这些轻松获胜的网站, 以迎合你访客的设备和偏好。我已经很好地利用它们了victoria.dev。我邀请你参加让我知道你的喜欢!

如果你喜欢这篇文章, 那么它的来源还有很多。订阅victoria.dev首先看新文章。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: