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

news2024/11/24 14:26:58

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2091387.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

20行为型设计模式——访问者模式

一、访问者模介绍 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;用于将操作封装在访问者对象中&#xff0c;以便在不改变被访问对象的类的前提下&#xff0c;定义新的操作。它允许你在不修改现有代码的情况下&#xff0c;向对象结构中添…

类和对象以及内存管理

对象拷贝时的编译器优化 现代编译器会为了尽可能提高程序的效率&#xff0c;在不影响正确性的情况下会尽可能减少⼀些传参和传返回值的过程中可以省略的拷贝。如何优化C标准并没有严格规定&#xff0c;各个编译器会根据情况自行处理。当前主流的相对新⼀点的编译器对于连续⼀个…

电池信息 v5.29.11 高级版,智能优化充电,最多可延长50%电池寿命

Charging Master 是一款非常实用的安卓 APP&#xff0c;专注于为您的手机充电提供最佳体验。借助其智能优化功能&#xff0c;Charging Master 能够最大程度地延长电池寿命&#xff0c;最多可达 50% 的节省。此外&#xff0c;该应用还提供了一系列功能&#xff0c;助您更好地管理…

提升团队效率的9款免费办公工具评测

本文主要介绍了以下9款协同办公软件&#xff1a;1.Worktile&#xff1b;2.PingCode&#xff1b;3.石墨文档&#xff1b;4.Teambition&#xff1b;5.蓝湖&#xff1b;6.工作宝&#xff1b;7.飞书&#xff1b;8.Asana&#xff1b;9.ClickUp。 在现代职场中&#xff0c;团队协作已…

GD - GD32350R_EVAL - PWM实验和验证1

文章目录 GD - GD32350R_EVAL - PWM实验和验证1概述笔记实验设计实验环境GD32350R_EVAL 的硬件连接修改程序配置 - 只产生PWM波&#xff0c;不要CMP清除波形TIMER0时钟设置TIMER0的PWM设置参数设置main()中PWM波形的开启代码示波器测量结果如果要产生4KHZ的PWM需要设置怎样的参…

在centos系统中kill掉指定进程

如上图&#xff0c;我想kill掉 python3 func_tg_1_vps.py这个进程&#xff08;而不kill掉python3 func_tg_2_vps.py&#xff09;。 解决方法&#xff1a; 第一步&#xff1a;首先使用ps -ef | grep python3命令&#xff0c;查出所有包含python3的命令 拿其中一条讲解 root …

开放式耳机漏音有多大?开放式耳机是否值得购买?

开放式耳机确实存在漏音的问题&#xff0c;这是因为其设计原理决定的。开放式耳机不像封闭式耳机那样完全封闭耳道&#xff0c;因此声音会向外散播&#xff0c;导致漏音。不过&#xff0c;随着技术的发展&#xff0c;许多耳机制造商已经开始着手解决这个问题&#xff0c;通过改…

Git之2.0版本重要特性及用法实例(五十六)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者. 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列…

VScode 使用记录

插件 1、代码提示插件&#xff1a;Codeium 安装说明&#xff1a;Codeium&#xff1a;强大且免费的AI智能编程助手 - Su的技术博客 (verysu.com) 用google账号登陆&#xff0c;跳转按照官网给的三个步骤来 step1&#xff1a;复制token&#xff1b; step2&#xff1a;在文件页…

中秋佳节,南卡Runner Pro5骨传导耳机让团圆更圆满!

中秋节&#xff0c;这个承载着温馨与团圆的节日&#xff0c;是向亲朋好友表达深情厚意的绝佳时刻。在这样一个特别的日子里&#xff0c;挑选一份既实用又充满科技感的礼物&#xff0c;无疑能够给人们带来惊喜与感动。南卡Runner Pro5骨传导耳机&#xff0c;凭借其创新的设计和卓…

绿色消费新动力:‘众店‘模式引领数字经济下的零售创新

在数字浪潮的推动下&#xff0c;传统零售业正经历着前所未有的转型。绿色消费积分系统&#xff0c;在这一变革中崭露头角&#xff0c;成为新兴消费平台的佼佼者。 一、"众店"平台的快速崛起 仅用两年时间&#xff0c;"众店"平台就实现了巨大的飞跃&#x…

代码随想录算法训练营day58:图论08:拓扑排序精讲;dijkstra(朴素版)精讲

拓扑排序精讲 卡码网&#xff1a;117. 软件构建(opens new window) 题目描述&#xff1a; 某个大型软件项目的构建系统拥有 N 个文件&#xff0c;文件编号从 0 到 N - 1&#xff0c;在这些文件中&#xff0c;某些文件依赖于其他文件的内容&#xff0c;这意味着如果文件 A 依…

4_PMSM基于s函数的仿真建模_1

为了检验电机仿真模型的正确性&#xff0c;&#xff0c;以基于s函数方法搭建的数学模型为例&#xff0c;搭建如图的三相所示的简单三相PMSM矢量控制系统&#xff0c;此模型忽略了PWM逆变器的影响。另外&#xff0c;感兴趣的同志可以对基于Simulink方法搭建的仿真模型进行验证。…

二叉树详解(2)

文章目录 4. 二叉树链式结构的实现5. 二叉树基础oj练习 4. 二叉树链式结构的实现 首先&#xff0c;我们先要了解一下二叉树的遍历顺序有哪些&#xff1a; 通过了解二叉树的遍历顺序&#xff0c;我们不难看出要实现二叉树的遍历需要用到递归&#xff0c;而使用递归我们就要思…

基于STM32开发的智能电力监控与管理系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 系统初始化电流电压数据采集与处理能耗计算与负载管理OLED显示与状态提示Wi-Fi通信与远程监控应用场景 工业设施的电力监控与优化智能家居中的电力管理与节能常见问题及解决方案 常见问题解决…

【C++ 面试 - STL】每日 3 题(二)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…

Code Practice Journal | Day58_Graph08 Topological Sorting

1. 概念 在一个有向无环图(DAG)中&#xff0c;根据节点的依赖关系&#xff0c;对所有的节点进行线性排序的算法 拓扑排序的结果不一定是唯一的 2. 实现 2.1 BFS&#xff08;卡恩算法&#xff09; 1、步骤 2、代码实现 以KamaCoder 117.软体构建 题目&#xff1a;117. 软件…

Stable Diffusion绘画 | 插件-宽高比调整助手:让计算器毕业

在调整图片宽高时&#xff0c;如果每次都需要用计算器根据比例算好&#xff0c;再手工输入&#xff0c;非常影响效率。 推荐使用以下的插件&#xff0c;来实现高效准确地调整图片宽高比例。 Aspect Ratio Helper 安装地址&#xff1a;https://github.com/thomasasfk/sd-webui…

80、k8s概念及组件介绍

一、k8s kubernetes:k8s----希腊语&#xff0c;舵手&#xff0c;飞行员 1.1、k8s作用&#xff1a; ​ 用于自动部署&#xff0c;扩展&#xff0c;管理容器化部署的应用程序。开源&#xff08;半开源。&#xff09; ​ k8s的底层语言是由go语言。 ​ k8s理解成负责自动化运…

Jetson Orin Nano GPIO 舵机

jetson orin nano 40针引脚扩展接头&#xff1a; 图源 Jetson Orin Nano Developer Kit User Guide - | NVIDIA Developer 引脚配置 使用jetson-io tool配置引脚&#xff1a; sudo /opt/nvidia/jetson-io/jetson-io.py 选择“Configure Jetson 40pin Header”: "Confi…