media queries的书写顺序问题

最新推荐文章于 2023-08-11 08:26:35 发布

zzgt802

最新推荐文章于 2023-08-11 08:26:35 发布

阅读量787

点赞数

CC 4.0 BY-SA版权

分类专栏：编程小窍门文章标签：自我学习编程

本文链接：https://blog.youkuaiyun.com/u014351705/article/details/22297359

编程小窍门专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了CSS响应式布局中@MixinBreakpoint宏的应用，并通过实例展示了如何根据不同屏幕分辨率调整body背景色。重点分析了宏的使用逻辑及覆盖原理，帮助开发者解决在不同设备上实现美观响应式设计的难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@mixin breakpoint($point) {
@if $point == big {
@media (max-width: 1024px) { @content; }
}
@else if $point == middle {
@media (max-width: 800px) { @content; }
}
@else if $point == small {
@media (max-width: 320px) { @content; }
}

}

很简单的一个定义，即对三种不同的分辨率进行了定义，现在我需要根据不同的分辨率来调整body的背景色，于是我这样写了下来：

body{
background-color:black;
@include breakpoint(small){
background-color:blue;
}

@include breakpoint(middle){
background-color:green;
}

@include breakpoint(big){
background-color:red;
}
}

到浏览器刷新后，发现只有当窗口大小到<=1024px的时候进行了一次变色(即body变成红色)，为什么呢？为什么分辨率到达800px和320px的时候没有反应呢？其实仔细想了一下很简单，因为@include breakpoint(big)是在最后调用的，前面的small、middle起作用了，但因为后面的1024大于800和320，覆盖了前面。

而我们把调用的地方改成这样就可以了：

body{
@include breakpoint(big){
background-color:red;
}
@include breakpoint(middle){
background-color:green;
}
background-color:black;
@include breakpoint(small){
background-color:blue;
}
}