Fork me on GitHub

css媒体查询

发表于 | 更新于: | 分类于 | | 本文总阅读量 次
字数统计: 449 | 阅读时长 ≈ 1

CSS 媒体查询

什么是媒体查询 media query？
1
2
3
4
5
6
/*简单的媒体查询*/
@media screen and (max-width:480px){
	body {
		 background-color: red;
	}
}
为什么需要媒体查询？

一套样式不可能适应各种大小的屏幕针对不同的屏幕大小写样式，让我们的页面在不同大小的屏幕上都能正常显示

什么是媒体类型？

真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 
screen         计算机屏幕（默认值）    
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection     放映机
handheld       手持设备（小屏幕、有限的带宽）
print          打印预览模式 / 打印页
braille        盲人用点字法反馈设备
aural          语音合成器
all            适合所有设备

*/

/媒体查询，参考部分Bootstrap 框架/
/当页面大于1200px 时，大屏幕，主要是PC 端/
@media (min-width: 1200px) {

}
/在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC/
@media (min-width: 992px) and (max-width: 1199px) {

}
/在768 和991 像素之间的屏幕里，小屏幕，主要是PAD/
@media (min-width: 768px) and (max-width: 991px) {

}
/在480 和767 像素之间的屏幕里，超小屏幕，主要是手机/
@media (min-width: 480px) and (max-width: 767px) {

}
/在小于480 像素的屏幕，微小屏幕，更低分辨率的手机/
@media (max-width: 479px) {

}
媒体查询中的逻辑

与 ( and )

1
2
3
4
5
@media screen and (min-width:900px) and (max-width: 1024px){
	body {
		background-color: red;
	}
}

或 ( )

1
2
3
4
5
@media screen and (min-width:1024px),(max-width: 900px){
	body {
		background-color: red;
	}
}

非 ( not )

1
2
3
4
5
@media not screen and (min-width:1024px),screen and(max-width: 900px){
	body {
		background-color: red;
	}
}