您现在的位置是:主页 > 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到多个关键字,以及一种媒体类型。

    标签:

    很赞哦! ()

本栏推荐