当前位置：首页 > news >正文

使用scss简化媒体查询

news 2025/8/4 21:26:45

在进行媒体查询的编写的时候，我们可以利用scss与与编译器，通过@include混入的方式对代码进行简化，从而大大提高了代码的可维护性，也减少了代码的编写量，废话不多说，直接上代码：

// 断点列表 相当于js中的数组，只不过这里数组用()表示
$breakpoints: ("phone": (320px,480px,),"pad": (481px,768px,),"notebook": (769px,1024px,),"pc": (1025px,1200px,),// 大屏"tv": 1201px,
);
// 混合
@mixin respond-to($breakname) {// map-get函数可以拿到上面定义的map数组中的值$bp: map-get($breakpoints, $breakname);// type-of用于判断上面的键是否是数组/列表类型@if type-of($bp) == "list" {$min: nth($bp, 1); // 拿到设备尺寸的最小值, 列表中的第一个值$max: nth($bp, 2); // 拿到设备尺寸的最大值, 列表中的第二个值// >= 最小值  and  <= 最大值@media (min-width: $min) and (max-width: $max) {// 类似于vue中的插槽，在此处挖一个坑，外面可以往里面传入不同的css样式// 比如：下面代码示例中传入的是heigth的值@content;}} @else {@media (min-width: $bp) {@content;}}
}// 编写scss代码
.header {display: flex;width: 100%;background-color: pink;@include respond-to("phone") {height: 50px;}@include respond-to("pad") {height: 60px;}@include respond-to("notebook") {height: 80px;}@include respond-to("pc") {height: 100px;}@include respond-to("tv") {height: 200px;}
}

最终编译的结果：

.header {display: flex;width: 100%;background-color: pink;
}@media (min-width: 320px) and (max-width: 480px) {.header {height: 50px;}
}@media (min-width: 481px) and (max-width: 768px) {.header {height: 60px;}
}@media (min-width: 769px) and (max-width: 1024px) {.header {height: 80px;}
}@media (min-width: 1025px) and (max-width: 1200px) {.header {height: 100px;}
}@media (min-width: 1201px) {.header {height: 200px;}
}