**媒体查询** 媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 ```css /* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } ~~~ ``` *常见的媒体查询尺寸：*  所以常用到的设置： ```css @media screen and (min-width:320px) and (max-width: 480px){} @media screen and (min-width:480px) and (max-width: 768px){} @media screen and (min-width:768px) and (max-width: 900px){} @media screen and (min-width: 900px) and (max-width: 1024px){} @media screen and (min-width: 1024px){} ``` 当然不是必须按照这样设置，实际项目中的媒体查询尺寸要按照客户要求的媒体尺寸来设置。另外还有注意的一点是媒体尺寸设置的先后顺序，不然后面的会覆盖前面的样式。我通常是从小到大设置