巧用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,第二个参数是keytype-of
用于判断一个值的类型,如果是数组类型则返回 listnth($bp,1)
从数组中获取第一项@content
类似与插槽,在@include
的方法体中编写的样式会被用于这里
基于以上我们就实现了一个通用的媒体查询代码,以后在开发过程中如果需要适配不同的设备,我们只需要使用 @include
为不同大小的设备编写不同的样式即可,不需要每次都去编写重复的媒介查询代码