媒体查询

为什么学习媒体查询？

实现页面在不同设备下正常预览 ，实现响应式

媒体类型

1. all 用于所有设备
2. screen (电脑屏幕,平板电脑,智能手机)
3. print 用于打印机和打印预览
4. speech 应用于屏幕阅读器等发声设备

媒体特性

1. width 网页显示区域完全等于设置的宽度
2. height 网页显示区域完全等于设置的高度
3. max-width / max-height 网页显示区域 小于等于 设置的宽度
4. min-width / min-width 网页显示区域 大于等于 设置的宽度
5. orientation: portrait (竖屏模式) | landscape (横屏模式)

//  语法     @media 媒体类型  and （媒体特性）{你的样式}

@media screen  and (max-width: 420px) {
 	body {
 		background-color: red;
 	}
 }

//  多个媒体特性，使用 and not only

 @media only screen and (width: 320px) and (height: 568px) {
	body {
 		background-color: red;
 	}
}