前端开发攻略---简化响应式设计:利用 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文件内容和第二步一模一样,而且上面这个代码只需要做一次,不需要每次都写,项目里面做一次甚至可以跨越项目,后边要做的无非就是使用这个混合

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

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

相关文章

ffmpeg命令与批处理编程

(一) CMD脚本查找所有文件 powershell与cmd转换 powershell与cmd虽然同为windows命令,但许多命令并不通用。 CMD换行符 a 在CMD下,可以用^作为换行符,类似于Linux下的\。举例如下: start pemu.exe ^ -net nic,vlan1,macaddr…

Mongodb前后端整合篇

一、前端篇 1.1mongoose介绍 Mongoose 是一个对象文档模型库,官网 http://www.mongoosejs.net/ 方便使用代码操作 mongodb 数据库pnpm i mongoose5.13.15 1.2初步使用 import mongoose from mongoose; //设置 strictQuery 为 true mongoose.set(strictQuery, true…

ssm041绿色农产品推广应用网站+vue

绿色农产品推广应用网站 摘 要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的…

js打印页面源码 ,打印选取的容器里的内容,打印指定内容

js打印页面源码 &#xff0c;打印选取的容器里的内容&#xff0c;打印指定内容 效果 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…

2011年认证杯SPSSPRO杯数学建模A题(第二阶段)客机水面迫降时的姿态全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 A题 客机水面迫降时的姿态 原题再现&#xff1a; 2009 年 1 月 15 日下午&#xff08;美国东部时间&#xff09;&#xff0c;US Airways 所属第 1549 航班&#xff08;空中客车 A320 客机&#xff09;在起飞后不久在纽约哈德逊河紧急迫降。经及…

动态代理 --java学习笔记

什么是动态代理&#xff1f; 当一个类的很多方法都存在重复冗杂的部分&#xff0c;就可以使用代理来处理那些重复部分的任务&#xff0c;到了各自的实现部分再丢回给原方法处理&#xff0c;同时也可以提高方法的扩展性&#xff0c;而动态则是指在运行时动态地创建代理对象&…

Acrobat Pro DC 2023 for mac直装激活版 pdf编辑处理工具

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑器&#xff0c;为用户提供了全面且高效的PDF处理体验。 软件下载&#xff1a;Acrobat Pro DC 2023 for mac直装激活版下载 首先&#xff0c;它支持用户从现有文档创建PDF&#xff0c;或者将其他文件格式如图片、网页等轻松转…

个人博客项目笔记_05

1. ThreadLocal内存泄漏 ThreadLocal 内存泄漏是指由于没有及时清理 ThreadLocal 实例所存储的数据&#xff0c;导致这些数据在线程池或长时间运行的应用中累积过多&#xff0c;最终导致内存占用过高的情况。 内存泄漏通常发生在以下情况下&#xff1a; 线程池场景下的 ThreadL…

牛客 NC252 多数组中位数【中等 模拟 Java,Go】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/b6bb0bce88894108bfc23e9b7b012420 思路 模拟&#xff0c;2数组合并一个数组helphelp长度为奇数&#xff0c;直接取中间值&#xff0c;为偶数&#xff0c;中间2个值&#xff0c;哪个小返回哪个参考答案Java imp…

结合ArcGIS+SWAT模型+Century模型:流域生态系统水-碳-氮耦合过程模拟

原文链接&#xff1a;结合ArcGISSWAT模型Century模型&#xff1a;流域生态系统水-碳-氮耦合过程模拟https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&tempkeyMTI2NV9sMGRZNUJoVkNVc1ZzSzRuMl9XXzhqX0R3cXpESWFwM1E4cFY4ejNqWFh3VUl0dlZkNWk4b20ydFdFTy1xS2ZObGN0Z0ZXSjly…

tcp接受命令执行并回显

为了实现循环执行命令并能够多次从TCP客户端接收命令&#xff0c;您需要对上面的代码进行一些修改。下面是一个修改后的示例&#xff0c;它将在接收到新的TCP连接后进入一个循环&#xff0c;不断地读取命令、执行命令&#xff0c;并将结果发送回客户端&#xff0c;直到客户端断…

【AcWing】蓝桥杯集训每日一题Day27|矩阵乘法|快速幂|205.斐波那契(C++)

205.斐波那契 205. 斐波那契 - AcWing题库难度&#xff1a;中等时/空限制&#xff1a;1s / 64MB总通过数&#xff1a;3220总尝试数&#xff1a;4747来源&#xff1a;《算法竞赛进阶指南》算法标签数学知识矩阵乘法快速幂 题目内容 在斐波那契数列中&#xff0c; F i b 0 0 …

【学习路径】AI入门路线分享

近期整理飞书文档&#xff0c;一些权限被关掉了。看好多人在申请访问这个飞书文档&#xff0c;于是把它单独拿出来放在CSDN上&#xff0c;供大家参考~ 原视频地址&#xff1a;AI&#xff1a;从小白到入门&#xff0c;超详细人工智能成长路径分享_哔哩哔哩_bilibili 文章目录 1.…

OpenStack (T)部署trove

环境&#xff1a;Openstack&#xff08;T&#xff09; CentOS Linux release 7.9.2009 (Core) 正文&#xff1a; 1.控制节点安装trove软件包 # yum install openstack-trove-guestagent openstack-trove python-troveclient openstack-trove-ui –y2.创建数据库&#xff0c…

2024-04-12 问AI: 在深度学习中,什么是参数,什么是超参数?

文心一言 在深度学习中&#xff0c;参数和超参数是两个非常重要的概念&#xff0c;它们在模型的训练和调优过程中起着关键的作用。以下是它们的基本定义和区别&#xff1a; 参数&#xff08;Parameters&#xff09;&#xff1a; 参数是模型在训练过程中学习的变量。它们是从数…

C++11 设计模式3. 工厂方法模式

简单工厂模式的遗留问题 //从上面的代码可以看到&#xff0c;简单工厂模式确实实现了new 出来具体对象&#xff0c; 和 业务逻辑的分离&#xff0c; //但是不符合 "开闭原则" //"开闭原则"说的是代码扩展性问题——对扩展开放&#xff0c;对修改关…

如何在OceanBase v4.2 中快速生成随机数据

在使用传统数据库如 MySQL 和 Oracle 时&#xff0c;由于缺乏多样化的随机数据生成方案&#xff0c;或者实现成本过高&#xff0c;构造随机数据的开发成本受到了影响。OceanBase在老版本中虽然有相应的解决方案&#xff0c;但语法复杂和性能较差等问题仍然存在。 现在&#xf…

【漏洞复现】润乾报表平台 InputServlet接口处存在任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

报错[Vue warn]: $attrs is readonly. $listeners is readonly.

可能是加载了多个Vue实例导致&#xff0c;解决方法 vue.config.js chainWebpack: config > {config.resolve.alias.set(, resolve(src)).set(vue, resolve(./node_modules/vue))},然后重新运行项目即可

【.net core】【sqlsugar】联表查询与实体自动映射语法

官方文档&#xff1a;联表查询、关联查询、JoinTable、连表查询、Left Join - SqlSugar 5x - .NET果糖网 Join用法&#xff1a;语法糖2 Select 用法&#xff1a;自动映射 //类A 数据库字段与类成员一致 public class ClassA{//主键IDpublic int id{get;set;}//名称public st…