首页 > 其他 > 详细

bootstrap媒体查询

时间:2017-12-29 14:00:30      阅读:172      评论:0      收藏:0      [点我收藏+]

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的顺序,不要颠倒

bootstrap媒体查询

原文:https://www.cnblogs.com/Corphish/p/8143250.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!