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

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

效果展示

实现代码

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

相关推荐
前端小巷子3 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹6 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器13 分钟前
指定阿里镜像原理
前端
枷锁—sha17 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha19 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜35 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss