bootstrap媒体查询

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

以上是官网中介绍的内容，但是我使用上述方法写入css文件，再通过<link rel="stylesheet" href="css/sy.css">该文件引入时时并没有起作用。

最后通过查询发现要是上述代码起作用引用方式应改为 <link rel="stylesheet" media="screen" href="css/sy.css">

通过导入link标签，媒体查询进行判断，如果当前设备是显示器，而不是打印机等其他的设备，那么就导入screen.css文件，这里要注意media和href的顺序，不要颠倒