bootstrap媒体查询的作用是什么

这期内容当中小编将会给大家带来有关bootstrap媒体查询的作用是什么，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

在Bootstrap中，媒体查询可以通过屏幕的大小来分辨使用的设备并设置不同样式，可以在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

本教程操作环境：Windows7系统、bootsrap3.3.7版、DELL G3电脑

bootstrap媒体查询通过屏幕的大小来分辨你使用的设备

额外的小设备（手机，小于 768px）

小型设备（平板电脑，768px 起）

中型设备（台式电脑，992px 起）

大型设备（大台式电脑，1200px 起）

媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了媒体查询如何引用到项目中，但媒体查询有其自己的使用规则。具体来说，媒体查询 的使用方法如下。

@media 媒体类型and （媒体特性）{你的样式}

注意：使用媒体查询必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1、最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2、最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3、多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

转载：感谢您对IDCBT博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源IDCBT博客”。

标签：

很赞哦！ ()