关于css中@media的一些基本使用

最近编写响应式的时候在使用@media用的不是很顺手，因此就记录一下方便查看

基本语法：

@media +（ not  | only） + 媒体类型 +（and+ 媒体查询）

 

咱们首先了解一下媒体类型，经常使用的很少，就几个：screen（电脑屏幕） ，print （打印或者打印预览），all（全部设备）

（本文侧重讲述screen，由于本人最近都用这个，嘻嘻）

 

而后这个设备类型的做用是什么？

答：用来匹配查询条件的，就是你是要以什么标准去匹配，是按照屏幕大小改变的条件去匹配仍是按照打印的方式去匹配

 

而后后面的（and+媒体查询），这个是用来限制查询条件的，例如当屏幕小于最大宽度时，@media中的class就起做用了

例子：当屏幕宽度小于678px的时候，.box类的背景颜色为红色

@media screen and （max-width:678px）{

.box {

background-color:red;

}

}

 

固然你的媒体查询条件也能够有多个限制

例子：当屏幕宽度在678px到992px之间时，.box类的背景颜色为红色

@media screen and （min-width:678px） and (max-width:992px){

.box {

background-color:red;

}

}

 

最后是两个修饰词，not，only

先说only，用来匹配媒体类型，表示只对该媒体类型适用

例子：只对screen类型起做用，对于print等其余设备不起做用

@media only screen and （max-width:678px）{

.box {

background-color:red;

}

}

 

not就是对于除了该媒体类型的其余类型起做用

例子：对于screen类型不起做用，其余类型起做用

@media not screen and （max-width:678px）{

.box {

background-color:red;

}

}