您现在的位置是:主页 > Web前端技术 > Web前端技术
bootstrap媒体查询的作用是什么
IDCBT2022-01-10【服务器技术】人已围观
简介这期内容当中小编将会给大家带来有关bootstrap媒体查询的作用是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 在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到多个关键字,以及一种媒体类型。
标签:很赞哦! ()