我理解在CSS中创建级联层的本质是以模块化和可重用的方式组织和管理样式。通过使用层叠层，我可以将相关的样式分组在一起，并将它们应用到网站的特定组件或部分。
但我不明白的是它在媒体查询中的用途，就像下面的例子一样，我希望层移动的样式应用于max-width：768 px，但当屏幕宽度比768 px宽时会有。
我很想知道它是否应该在最近的项目中使用，因为它是CSS中相对较新的功能，并且没有旧的浏览器支持。
有人能解释一下吗？
@media (max-width: 768px) {
@layer mobile;
}
@layer desktop {
/* CSS rules for desktop layout */
.header {
width: 60%;
}
.content {
padding: 120px;
font-size: 120px;
}
body{
background-color: white;
}
}
@layer mobile {
/* CSS rules for mobile layout */
.header {
width: 100%;
}
.content {
padding: 0 10px;
font-size: 10px;
}
body{
background-color: blueviolet;
}
}字符串
1条答案
按热度按时间mi7gmzs61#
层按照它们首先被提到的顺序被评估，其中后面提到的层优先，其方式与后面的规则优先于前面的规则相同，当它们具有相同的特异性时。
所以呢
字符串
在顶部意味着当屏幕为768 px宽或更小时，“移动的”是第一个提到的层。
所以在小屏幕上，顺序是“移动的”，“桌面”，正如后面提到的层具有优先级，“桌面”层的样式应用于页面。
当屏幕大于768 px时，@media规则被忽略，因此提到的层的顺序是“桌面”，“移动的”，并且“移动”层的样式是应用的样式。
要解决这个问题，只需使用min-width而不是max-width。然后在更大宽度的浏览器上，“移动的”层将被“拉”到“桌面”层之前，然后后面的“桌面”层将是应用的样式。
或者，如果你想使用max-width来避免屏幕宽度在子像素间隙中的风险，你可以像这样声明顶部的所有层：
型
因此，在小屏幕上，“桌面”层被“拉”到“移动的”层之前。