CSS学习--媒体查询

媒体查询

语法

@media media-type and (media-feature-rule) {/* CSS rules */}

• media-type: 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
• media-feature-rule: 一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；
• CSS rules: 一组CSS规则，会在测试通过且媒体类型正确的时候应用。

media-type

官方文档直通车

all | print | screen | speechmedia-feature-rule

1. 宽高

@media screen and (max-width: 400px) {
	body { color: blue; }
}

2. 横竖屏

@media (orientation: landscape) {
	body { color: rebeccapurple; }
}

3. 指点设备

@media (hover: hover) {
	body { color: rebeccapurple; }
}

4. 逻辑符号

• 与

@media screen and (min-width: 400px) and (orientation: landscape) {
	body { color: blue; }
}

• 或

@media screen and (min-width: 400px), screen and (orientation: landscape) {
	body { color: blue; }
}

• 非

@media not all and (orientation: landscape) { 
	body { color: blue; } 
}