在進(jìn)行媒體查詢的編寫的時(shí)候，我們可以利用scss與與編譯器，通過@include混入的方式對代碼進(jìn)行簡化，從而大大提高了代碼的可維護(hù)性，也減少了代碼的編寫量，廢話不多說，直接上代碼：

// 斷點(diǎn)列表 相當(dāng)于js中的數(shù)組，只不過這里數(shù)組用()表示
$breakpoints: ("phone": (320px,480px,),"pad": (481px,768px,),"notebook": (769px,1024px,),"pc": (1025px,1200px,),// 大屏"tv": 1201px,
);
// 混合
@mixin respond-to($breakname) {// map-get函數(shù)可以拿到上面定義的map數(shù)組中的值$bp: map-get($breakpoints, $breakname);// type-of用于判斷上面的鍵是否是數(shù)組/列表類型@if type-of($bp) == "list" {$min: nth($bp, 1); // 拿到設(shè)備尺寸的最小值, 列表中的第一個(gè)值$max: nth($bp, 2); // 拿到設(shè)備尺寸的最大值, 列表中的第二個(gè)值// >= 最小值  and  <= 最大值@media (min-width: $min) and (max-width: $max) {// 類似于vue中的插槽，在此處挖一個(gè)坑，外面可以往里面?zhèn)魅氩煌腸ss樣式// 比如：下面代碼示例中傳入的是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;}
}

最終編譯的結(jié)果：

.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;}
}

如此一來，編寫響應(yīng)式布局就變得十分方便了~