使用 SASS 混合器和@media 适应分辨率变化

SASS安装使用过程略过。。。

具体可以参考：SASS开发环境搭建（webstorm做编辑器）_ClassicSong的博客-CSDN博客_sas 环境搭建

在使用@media screen适应分辨率变化，对各组件的都需要重复写css ，已适应不同分辨率该使用什么尺寸。

这种情况下CSS代码不好管理，且不好编辑。

使用SASS的混合器，把每一个分辨率的变化的CSS封装成方法，每一个不同的尺寸以传参的形式，进行编写。

节省代码的同时，更方便去管理每一个CSS的尺寸变化。

例子

代码：

@charset "UTF-8";//背景颜色
$all-bgColor:#5b9bd5;//封装方法(传入4个参数，方法必须写前面)
@mixin allSize-PX($oneBtn-width,$oneBtn-height,$font-size,$date-width) {/*中间按钮*/.oneBtn{margin: 0 auto;width: $oneBtn-width;height: $oneBtn-height;}/*时间选择*/.date {border: none;width: $date-width;height: 30px;background-color: $all-bgColor;padding-top: 2px;font-size: $font-size;}
}/* css注释：设置了浏览器宽度不小于1401px时 abc 显示1200px宽度 */
@media screen and (min-width: 1401px) {@include allSize-PX($oneBtn-width:250px,$oneBtn-height:100px,$font-size:18px,$date-width:110px);
}/* 设置了浏览器宽度不大于1400px时 */
@media screen and (max-width: 1400px) {@include allSize-PX($oneBtn-width:220px,$oneBtn-height:80px,$font-size:16px,$date-width:100px);
}@media screen and (max-width: 1200px){@include allSize-PX($oneBtn-width:190px,$oneBtn-height:70px,$font-size:15px,$date-width:90px);
}/* 设置了浏览器宽度不大于900px时 abc 显示900px宽度 */
@media screen and (max-width: 900px){@include allSize-PX($oneBtn-width:170px,$oneBtn-height:65px,$font-size:14px,$date-width:80px);
}

传入的参数也可以弄成全局变量，同样可以进行加减乘除，具体算法规则可以参考

https://www.sasscss.com/getting-started/#5

注：调用CSS文件，不能调用SCSS文件。

使用 SASS 混合器和@media 适应分辨率变化相关推荐

分辨率变化的数据from mydrivers 显卡评测
http://hardware.mydrivers.com/2/178/178706.htm 4系列入门显卡450的比较评测. 对里面的分辨率变化带来的性能变化的数据很感兴趣: 对比是不同分辨率下的f ...
c++ MFC 根据屏幕分辨率变化自动调整控件位置和大小
在mfc应用程序开发过程中经常遇到应用场景分辨率不同对应窗口的控件相对位置不同,现在通过在给窗口做尺度变换后,原来的控件位置和大小跟着变,导致界面看起来仍然协调,如下: 缩放前: 缩放后要解决这个问 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
调试屏幕分辨率变化html页面变化,屏幕分辨率如何自动调整网页显示问题
对于初学者来说,屏幕分辨率就是一个陌生的词语,更别说如何操作了.小编今天就给初学者补习一下基础知识什么是电脑分辨率?如何进行电脑屏幕分辨率的调整?首先请各位电脑小白跟随学习啦小编认识下电脑分辨率. 确 ...
前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
《中国人工智能学会通讯》——10.25 跨姿态和光照变化的低分辨率人脸识别
10.25 跨姿态和光照变化的低分辨率人脸识别为了解决安全问题,监控的使用逐渐增多,这使得人们对完全自动并具有鲁棒性的人脸识别系统的要求也随之增大.通过监控获得的图片通常分辨率较低且姿态和光照条件不 ...
最大尺寸分辨率_LG UltraFine 4K显示器重上架苹果商店：尺寸变大，但降为UHD
在上个月中旬,我们曾全球较早地报道了苹果下架LG为他们独家推出的UltraFine 4K显示器,但事实上苹果和LG并没有取消这款小尺寸的高清分辨率显示器,在今天凌晨伴随2019款MacBook Pro ...
OpenVINO整活(一) 输入分辨率
OpenVINO整活(一) 输入分辨率 OpenVINO分为转换与部署两个部分,如下图所示在转换步中,需要将输入模型序列化后传入OpenVINO的MOModel Optimizer工具对模型进行优化 ...
PC端页面适应不同的分辨率的方法
上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率. 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目. 现在 ...

使用 SASS 混合器和@media 适应分辨率变化

使用 SASS 混合器和@media 适应分辨率变化相关推荐

最新文章

热门文章

使用 SASS 混合器 和@media 适应分辨率变化

使用 SASS 混合器 和@media 适应分辨率变化相关推荐

最新文章

热门文章

使用 SASS 混合器和@media 适应分辨率变化

使用 SASS 混合器和@media 适应分辨率变化相关推荐