响应式布局 @media

语法格式

@media only scrren and (max-width:400px){
代码
}
@media only scrren and (max-width:400px) and (max-width){
代码
}
举例：

@media only screen and (max-width:992px){
	.nav ul li:nth-child(4){
		display: none;
	}
}

and后面需要有空格否则不生效，且不报错

• only:可以排除不支持媒体查询的浏览器
• scrren:设备类型
• max-width:小于xxxx
• min-width：大于xxxx

响应式图片 p44

• 使用新增h5标签

   <div>
		<picture>
			<source srcset="xxx.png" media="(min-width:1000px)">
			<source srcset="xxx1.png" media="(min-width:700px)">
			<img srcset="xxx2.png">
		</picture>
	</div>

大于1000显示xxx，大于700显示xxx1，否则显示xxx2