Logo

菜单

发布于 2026-01-06 11 阅读
0

响应式页面和颜色主题，使用最少的 CSS

响应式页面和颜色主题，使用最少的 CSS

如果您碰巧访问我的网站，您可能会注意到我做了一些改进。Victoria.dev现在可以更好地响应您的设备和偏好设置！

只需几行 CSS 代码，即可使用CSS 媒体查询和自定义属性来改善访客的浏览体验。

迎合颜色偏好

媒体prefers-color-scheme功能可以查询用户选择的配色方案。light如果未设置任何偏好设置，则此选项为默认选项，并且在现代浏览器中具有良好的兼容性。

此外，使用特定设备的用户还可以根据日程设置浅色和深色主题。例如，我的手机在白天使用浅色界面，晚上则使用深色。您也可以让您的网站实现同样的效果！

通过在伪类中为颜色主题设置自定义属性，避免重复编写大量 CSS 代码:root。为每个需要支持的主题创建一个版本。以下是一个您可以参考的简单示例：

: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;
    }
}
Enter fullscreen mode Exit fullscreen mode

如您所见，您可以使用自定义属性来设置各种值。要将这些值用作其他 CSS 元素的变量，请使用以下var()函数：

header {
    color: var(--text-primary);
    background-color: var(--background);
    box-shadow: var(--shadow);
}
Enter fullscreen mode Exit fullscreen mode

在这个简单的示例中，该header元素现在将根据用户的浏览器设置显示用户偏好的颜色！

火狐浏览器

您可以通过在地址栏中输入来测试Firefox 的light各种模式。如果弹出警告，请接受警告，然后在搜索框中输入。darkabout:configui.systemUsesDarkTheme

选择Number设置值，然后输入1深色或0浅色。

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

勇敢的

如果您使用的是 Brave 浏览器，请在“设置” > “外观” > “Brave 颜色”中查找颜色主题设置。

Brave 浏览器中设置颜色主题的屏幕截图

变量缩放

您还可以使用自定义属性，根据用户的屏幕尺寸轻松调整文本或其他元素的大小。width媒体功能会检测视口的宽度。虽然width: _px它会匹配精确的尺寸，但您也可以使用 `width`min和max`height` 来创建尺寸范围。

使用查询min-width: _px来匹配大于_100 像素的任何内容，以及max-width: _px匹配小于等于_100 像素的任何内容。

使用以下查询语句设置自定义属性以:root创建比率：

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

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

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

calc()然后使用该函数使元素具有响应式设计。以下是一些示例：

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

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

img {
    width: calc(200px * var(--scale));
}
Enter fullscreen mode Exit fullscreen mode

在这个例子中，将初始值乘以你的--scale自定义属性，就可以让标题和图像的大小神奇地调整为适应用户设备的宽度。

相对单位rem也有类似的效果。你可以用它来定义元素相对于根元素声明的字体大小的大小。

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

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

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

当然，您也可以将两个自定义属性相乘。例如，将--max-img某个属性设置为自定义属性，:root可以帮助您节省后续在多个地方更新像素值的时间：

img {
    max-width: calc(var(--max-img) * var(--scale));
}
Enter fullscreen mode Exit fullscreen mode

提升你的响应速度

试试这些简单易行的方法，让你的网站更好地适配访客的设备和偏好。我已经把它们应用到我的网站victoria.dev上了，效果很不错。欢迎你告诉我你的使用体验！

如果您喜欢这篇文章，还有更多精彩内容等着您！请订阅victoria.dev，第一时间阅读最新文章。

文章来源：https://dev.to/victoria/responsive-pages-and-color-themes-with-minimal-css-3dei
借助 Python 学习 Go 语言
如何使用 GitHub Actio...