当前位置: 首页> 汽车> 报价 > 巧用scss实现一个通用的媒介查询代码

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

时间:2025/7/11 14:56:49来源:https://blog.csdn.net/SongZhengxing_/article/details/141749558 浏览次数: 0次

巧用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 为不同大小的设备编写不同的样式即可,不需要每次都去编写重复的媒介查询代码

关键字:巧用scss实现一个通用的媒介查询代码

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: