最近编写响应式的时候在使用@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;
}
}
如对本文有疑问， 点击进行留言回复！！
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错：Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
我要评论
网友评论