您是否曾经想根据容器宽度而不是视口宽度应用某些样式？好吧，现在您可以使用CSS container queries
做到这一点这很酷，但是正如我们过去与媒体查询所做的那样，我们可能想为代码库设置标准并定义了在整个项目中使用的通用断点的变量。
- 移动设备320px - 480px。
- iPad，平板电脑481px - 768px。
- 小屏幕，笔记本电脑769px - 1024px。
- 台式机，大屏幕 - 1025px - 1200px。
- 超大屏幕，电视1201px等等。
如果您使用的是一些CSS预处理程序，例如Sass，那么我们将做类似Mixin的事情来包装代码：
用于媒体查询
$breakpoint-xs: 480px;
$breakpoint-s: 768px;
$breakpoint-md: 1024px;
$breakpoint-l: 1200px;
$breakpoint-xl: 1900px;
@mixin x-small {
@media screen and (min-width: $breakpoint-xs) {
@content;
}
}
@mixin small {
@media screen and (min-width: $breakpoint-s) {
@content;
}
}
@mixin medium {
@media screen and (min-width: $breakpoint-md) {
@content;
}
}
@mixin large {
@media screen and (min-width: $breakpoint-l) {
@content;
}
}
@mixin x-large {
@media screen and (min-width: $breakpoint-xl) {
@content;
}
}
用于容器查询
如果我们尝试对容器查询完全相同，则它将无法解决，我们需要进行一些更改（覆盖变量值）
...
@mixin x-small {
@container (min-width: $breakpoint-xs) { /* this will not work and you will see no error */
@content;
}
}
...
因此，要使它适用于容器查询，我们需要用这样的断点来扫描变量：#{$breakpoint-xs}
...
@mixin x-small {
@container (min-width: #{$breakpoint-xs}) { /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */
@content;
}
}
...
上面的解决方案被报告为vScode的误差（css-ruleorSelectorexpected）），但是当它编译并运行良好时。
非常感谢我在thread中找到的解决方案
希望这对别人有帮助！
感谢您的阅读。