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">拖欠文件引入时时并无起作用。
最终经过查询发现如是上述代码起作用引用方式应改变吧
<link rel="stylesheet" media="screen" href="css/sy.css">

透过导入link标签,媒体询问进行判定,如果手上配备是显示器,而不是打印机等任何的装置,那么即使导入screen.css文件,这里要注意media和href的一一,不要颠倒

相关文章