Bootstrapbootstrap媒体询问

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">Bootstrap,该公文引进时时并从未起成效。
最后通过查询发现借使上述代码起效果引用方式应改为
<link rel="stylesheet" media="screen" href="css/sy.css">

由此导入link标签,媒体询问实行判定,如若当前设备是显示屏,而不是打印机等其余的配备,那么就导入screen.css文件,那里要留心media和href的种种,不要颠倒

相关文章