Question

在以下媒体查询中，当通过屏幕查看时，将应用样式声明中定义的样式。当最小宽度为480px宽时（正确吗？）：

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

你还能在表达陈述中加入什么？

例如，我想对URL片段进行调整：

@media screen and (document.location.hash=="#about") {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

@media screen and (document.location.hash=="#services") {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

@media screen and (document.location.hash=="#contact") {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

Answer 1

您可以在媒体查询表达中添加什么内容？

您只能放置媒体功能。唯一可用的媒体功能记录在规范中（MQ3，MQ4）。

例如，我想对URL片段进行调整：

遗憾的是，媒体查询无法做到这一点，尽管这听起来像一个有趣的用例，而不必将URL片段应用于html或body或其他任意包装元素。考虑到URL片段不是设备媒体本身的一部分，而是URL的一部分，我不确定它与媒体查询有多好。此功能更适合自己的规则（例如现在已经消失的@document）或选择器的一部分。

我能想到的最接近的纯选择器替代方案（在每个选择器上加上:root:has(#about:target)，:root:has(#services:target)等）在选择器4中，甚至不可用于CSS，因此这是真实的长号。

你可以把什么放入媒体查询表达式？

1 个答案: