关于媒体查询

媒体查询是响应式布局最基本的方法，下面有一个简单地实例代码:

屏幕在最小为601px，最大为1000px之间时，标签元素figure的宽度为50%显示：

@media screnn and(min-width:601px) and (max-windth:1000px){figure{width:50%} }

屏幕在最大为600px时，标签元素figure的宽度为100%显示
@media screen and (max-width:600px){figure{width:100%}}

屏幕在最小为1000px时，标签元素figure的宽度为33.33%显示.让其多排列几个
@media screen and (min-width:1001px){figure{width:33.33%}}