web前端:关于css中@media的一些基本使用
软工小法师
2024-04-23 23:55
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
最近编写响应式的时候在使用@media用的不是很顺手,所以就记录一下方便查看
基本语法:
@media+(not|only)+媒体类型+(and+媒体查询)
我们首先了解一下媒体类型,常用的不多,就几个:screen(电脑屏幕),print(打印或者打印预览),all(所有设备)
(本文侧重讲述screen,因为本人最近都用这个,嘻嘻)
然后这个设备类型的作用是什么?
答:用来匹配查询条件的,就是你是要以什么标准去匹配,是按照屏幕大小改变的条件去匹配还是按照打印的方式去匹配
然后后面的(and+媒体查询),这个是用来限制查询条件的,例如当屏幕小于最大宽度时,@media中的class就起作用了
例子:当屏幕宽度小于678px的时候,.box类的背景颜色为红色
@mediascreenand(max-width:678px){
.box{
background-color:red;
}
}
当然你的媒体查询条件也可以有多个限制
例子:当屏幕宽度在678px到992px之间时,.box类的背景颜色为红色
@mediascreenand(min-width:678px)and(max-width:992px){
.box{
background-color:red;
}
}
最后是两个修饰词,not,only
先说only,用来匹配媒体类型,表示只对该媒体类型适用
例子:只对screen类型起作用,对于print等其他设备不起作用
@mediaonlyscreenand(max-width:678px){
.box{
background-color:red;
}
}
not就是对于除了该媒体类型的其他类型起作用
例子:对于screen类型不起作用,其他类型起作用
@medianotscreenand(max-width:678px){
.box{
background-color:red;
}
}
随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341