响应式布局

• 网页可以根据不同的设备或窗口大小呈现不同的效果
• 使用响应式布局，可以使一个网页适用所有设备

媒体查询

• 响应式布局的关键就是媒体查询
• 可以为不同的设备，不同状态分别设置样式

语法

@media 查询规则{}

• 媒体类型
  • all 所有设备
  • print 打印设备
  • screen 屏幕阅读器
  • speech 屏幕阅读器
  • 为了兼容老浏览器，媒体类型前面要加only
• 媒体特性
  • width 视口宽度
  • heigh 视口高度
  • min-width 最小宽度（大于时生效）
  • max-height 最大高度

例子

@media only screen and (min-width: 500px) and (max-width: 700px){
	body{
		background-color: #bfa;
	}
}