web前端：关于css中@media的一些基本使用

作者:空白扉页更新于： 2020-04-17 16:17:59

　　层叠样式表(英文全称: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便诞生了。