前端开发攻略---简化响应式设计:利用 SCSS 优雅管理媒体查询

1、演示

2、未优化前的代码

.header {
  width: 100px;
  height: 100px;
  background-color: red;
}
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    width: 10px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 20px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 40px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 60px;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .header {
    height: 80px;
  }
}
@media (min-width: 1201px) {
  .header {
    height: 100px;
  }
}

可以想象一下,在真实的项目里面有这么多选择器要写,有这么多根据不同的设备处理不同的样式,这个代码根本看不了。

3、优化方法

 想办法优化成容易书写,容易维护,可以借助预编译器 sass 或者 less

4、sass介绍

Sass(Syntactically Awesome Stylesheets)是一种强大的CSS预处理器,它为CSS提供了许多增强功能,使得样式表的编写更加简洁和灵活。通过 Sass,您可以使用变量、嵌套规则、混合器、继承等功能,使得样式表的维护和管理更加容易。

其中,最常用的功能之一是变量。使用 Sass,您可以定义一次变量,然后在整个样式表中多次使用,这样可以方便地在需要时进行修改,而无需逐个查找和替换。

另一个重要的功能是嵌套规则。通过 Sass,您可以编写更加结构清晰的样式表,使用嵌套规则可以更好地组织和管理样式,提高代码的可读性和维护性。

此外,Sass还支持混合器(Mixins)和继承(Inheritance)等功能,这些功能可以帮助您减少样式表的重复代码,提高样式表的复用性和可维护性。

总的来说,Sass是一个强大的工具,可以帮助您更高效地编写和管理样式表,提高前端开发的效率和质量。

5、混合器

什么叫做混合: 可以提取一部分的公共代码

未编译前的代码,可以公共使用

@mixin flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.header{
  width: 100%;
  @include flex;
}
.nav{
  @include flex;
}

编译后的代码,会被编译为存粹的Css,最终的运行结果也是这个存粹的Css

.header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav{
  display: flex;
  justify-content: center;
  align-items: center;
}

6、传递参数

 编译前的scss文件

@mixin flex($layout){
    display: flex;
    justify-content: $layout;
    align-items: $layout;
}

.header{
  width: 100%;
  @include flex(center)
}
.nav{
  @include flex(start)
}

编译后的css文件

.header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav{
  display: flex;
  justify-content: start;
  align-items: start;
}

7、传递内容

 编译前的scss文件

@mixin flex($layout){
    display: flex;
    justify-content: $layout;
    align-items: $layout;
    @content;
}

.header{
  width: 100%;
  @include flex(center){
    background-color: red;
  }
}
.nav{
  @include flex(start){
    position: relative;
  }
}

 编译前的css文件

.header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}
.nav{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

8、优化后的代码


$typePoint:(
  'phone':(320px,480px),
  'pad':(481px,768px),  
  'notebook':(769px,1024px),
  'desktop':(1025px,1200px),
  'tv':1201px,
);

@mixin responseTo($type){
    $bp:map-get($typePoint,$type);
    @if type-of($bp) == 'list' {
        @media (min-width: nth($bp,1)) and (max-width: nth($bp,2)) {
            @content;
        }
    } @else {
        @media (min-width: $bp)  {
            @content;
        }
    }
}

.header{
    width: 100%;
    @include responseTo('phone'){
        height: 50px;
    }
    @include responseTo('pad'){
        height: 70px;
    }
    @include responseTo('notebook'){
        height: 90px;
    }
    @include responseTo('desktop'){
        height: 110px;
    }
    @include responseTo('tv'){
        height: 130px;
    }

}

写完保存过后,生成的css文件内容和第二步一模一样,而且上面这个代码只需要做一次,不需要每次都写,项目里面做一次甚至可以跨越项目,后边要做的无非就是使用这个混合

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详细介绍微信小程序app.js

这一节,我们详细介绍app.js 这个文件。这个文件的重要性我就不再赘述,前面已经介绍了。 一、app.js是项目的主控文件 任何一个程序都是需要一个入口的,就好比我们在学c的时候就会有一个main函数,其他语言基本都是一样。很明确的…

隆道商机订阅服务|“您有一条新的商机,请注意查收”

隆道商机订阅服务 自定义关键词,智能甄别商机,随时随地查看,多平台实时推送。 核心功能 商机无限查 您可以根据不同的维度,如项目类型、项目地区等,对招标采购信息进行查询和筛选,以精准查找全网范围内的…

【Spring源码】JDBC数据源访问实现

一、阅读线索 开始我们今天的对Spring的【模块阅读】,来看看Data Access的JDBC模块是怎么设计的。 源码阅读前,我们要先思考下本次的阅读线索: JDBC模块有什么作用该模块是怎么设计的我们从这个模块可以学到什么 二、探索 关于阅读线索一…

Python实现BOA蝴蝶优化算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蝴蝶优化算法(butterfly optimization algorithm, BOA)是Arora 等人于2019年提出的一种元启发式智能算…

十分钟到底能不能讲明白ROS到底能做啥

总结 录完视频发现十分钟不能,总共花了20分钟。 提纲: 课程、竞赛、论文Linux、C、Python、Github和ROS关联性强平台-资格和ROS关联性弱速度-成绩路径规划-全局和局部全局-侧重路径长短-找一条最优(短)的路局部-侧重速度控制-用…

数据可视化-ECharts Html项目实战(10)

在之前的文章中,我们学习了如何在ECharts中编写雷达图,实现特殊效果的插入运用,函数的插入,以及多图表雷达图。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错&…

Python基于Django的微博热搜、微博舆论可视化系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

host文件nginx代理 综合理解

之前一直理解得很糙 导致遇到问题很迷糊 今天经过大佬两句话讲明白了 特此记录 host文件 首先host做了代理 也就是对浏览器的DNS寻址做了拦截 具体原理可以参照当我们在地址栏输入URL的时候浏览器发生了什么 例如127.0.0.1 www.baidu.com 将 127.0.0.1 www.baidu.com 链接自…

春游江淮|出发,上宁国“村游”去

竹川村、赤岸村打卡佳处,春花烂漫,春意盎然,胡乐镇竹川村、赤岸村的油菜花,是宁国春天不可错过的风光。等大片大片的油菜花盛放,与悠悠远山交相辉映,可以来此骑行、散步,静静欣赏美好的春日风光。 山门村 世外桃源经过奇特的“山门洞”,来到山门村,村内古木参天,在春…

Cloudshark数据包分析功能介绍

什么是CloudShark CloudShark是一种基于Web的数据包分析平台,可以认为是wiresshark的cloud版本,但是其在威胁分析等方面比Wireshark的功能强大,如下是他们的主要区别。 Wireshark VS Cloudshark Wireshark定位是一款本地开源的网络数据包分…

2024年第十四届MathorCup数学应用挑战赛B题解题思路

B题https://mbd.pub/o/bread/ZZ6Wm5dx 问题1:对于附件I(Pre_test文件夹)给定的三张甲骨文原始拓片图 片进行图像预处理,提取图像特征,建立甲骨文图像预处理模型,实现对 甲骨文图像干扰元素的初步判别和处理。 针对问题1,对于附件…

考虑预同步的虚拟同步机T型三电平逆变器并离网MATLAB仿真模型

微❤关注“电气仔推送”获得资料(专享优惠) 模型简介 三相 T 型三电平逆变器电路如图所示,逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV,直流侧中点电位 O 设为零电位,交流侧输出侧是三相三线制连…

Linux的学习之路:6、Linux编译器-gcc/g++使用

摘要 本文主要是说一些gcc的使用,g和gcc使用一样就没有特殊讲述。 目录 摘要 一、背景知识 二、gcc如何完成 1、预处理(进行宏替换) 2、编译(生成汇编) 3、汇编(生成机器可识别代码 4、链接(生成可执行文件或…

如何调节变阻器的电阻值?

变阻器是一种可以改变电阻值的电子元件,广泛应用于各种电子设备中。调节变阻器的电阻值可以实现对电路中电流和电压的控制,从而实现对设备的控制和调节。下面是如何调节变阻器的电阻值的方法: 了解变阻器的基本原理:变阻器主要由固…

统信UOS桌面操作系统1060上隐藏Windows磁盘

原文链接:统信UOS桌面操作系统1060上隐藏Windows磁盘 Hello,大家好啊!继之前我们讨论了如何在统信UOS桌面操作系统1060上安装双系统之后,今天我要给大家介绍的是,在这个基础上如何隐藏Windows磁盘分区。这样做可以让你…

CDN优化

一、是什么 CDN (全称 Content Delivery Network),即内容分发网络 构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降…

IT行业网络安全守护者-行云管家云堡垒机

IT行业即信息技术行业,是一个涵盖广泛的行业领域,主要涉及与信息的处理、存储、传输和应用相关的技术。对于IT行业而言,保障数据安全以及网络安全至关重要,一不小心就容易造成数据泄露事件。今天我们小编就给大家介绍一下IT行业网…

Mongodb入门--头歌实验MongoDB 文档的高级查询操作

数据库存储了大量的数据&#xff0c;当我们需要特定的数据时就要使用查询方法&#xff0c;根据一定的条件&#xff0c;筛选出我们想要的数据&#xff0c;前一章我们简单介绍了条件操作符&#xff08;<、<、>、>、!等&#xff09;&#xff0c;在这一章中我们将更全面…

【Linux学习】初识Linux指令(一)

文章目录 1.指令操作与图形化界面操作1.什么是指令操作&#xff0c;什么是图形化界面操作&#xff1f; 2.Linux下基本指令1.Linux下的复制粘贴2.Linux两个who命令3.补充知识4.pwd指令5. ls 指令6.cd 指令1.目录树2.相对路径与绝对路劲3.常用cd指令 7.tree指令8. touch指令9.sta…

从浅入深理解JAVA异常

从浅入深理解JAVA异常 一、什么是异常以及异常的分类二、异常的分类1、常见的系统错误2、常见的编译时异常3、常见的运行时异常 三、创建异常1、创建JAVA中已经存在的异常 -- throw关键字1.1 语法1.2 使用2、自定义异常&#xff08;1&#xff09;区分你要创建哪种异常&#xff…