巧用scss实现一个通用的媒介查询代码

效果展示

实现代码

<template><div class="page-root"><div class="header"></div><div class="content"><div class="car-item" v-for="item in 9"></div></div></div>
</template><script setup></script><style scoped lang="scss">
// 断点列表
$breakpoints: ('s':(320px,767px),'m':(768px,991px),'l':(992px,1200px),'xl':1201px,
);// 混合
@mixin respond-to($name){$bp:map-get($breakpoints,$name);@if type-of($bp) == "list"{$min:nth($bp,1);$max:nth($bp,2);@media (min-width:$min) and (max-width:$max){@content;}}@else{@media (min-width:$bp){@content;}}
}.page-root{background-color: #f1f1f1;height: 100vh;width: 100vw;padding: 20px 10%;overflow: auto;@include respond-to('s'){padding: 10px;}@include respond-to('m'){padding: 20px 5%;}.header{height: 60px;width: 100%;background-color: white;}.content{margin-top: 15px;display: grid;grid-template-columns: repeat(3,1fr);gap: 15px;@include respond-to('s'){gap: 10px;margin-top: 10px;grid-template-columns: repeat(1,1fr);}@include respond-to('m'){grid-template-columns: repeat(2,1fr);}.car-item{aspect-ratio: 16/9;background-color: white;}}
}
</style>

代码解析

• $breakpoints 用作定义一个map，代码中我们定义了不同屏幕的尺寸，如果值是一个数组，也用小括号包裹起来
• map-get($breakpoints,$name) 从map中获取指定的value，第一个参数时map，第二个参数是key
• type-of 用于判断一个值的类型，如果是数组类型则返回 list
• nth($bp,1) 从数组中获取第一项
• @content 类似与插槽，在 @include 的方法体中编写的样式会被用于这里

基于以上我们就实现了一个通用的媒体查询代码，以后在开发过程中如果需要适配不同的设备，我们只需要使用 @include 为不同大小的设备编写不同的样式即可，不需要每次都去编写重复的媒介查询代码