Twitter Bootstrap 3:如何使用媒体查询？

Question

我正在使用Bootstrap 3来构建响应式布局,我想根据屏幕大小调整一些字体大小.如何使用媒体查询来制作这种逻辑？

Answer 1

Bootstrap 3

以下是BS3中使用的选择器,如果您想保持一致:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

注意:仅供参考,这可能对调试很有用:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Bootstrap 4

以下是BS4中使用的选择器.BS4中没有"最低"设置,因为"超小"是默认设置.即你首先编码XS大小,然后将这些媒体覆盖.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

更新2019-02-11:从版本3.4.0开始,BS3信息仍然准确,新网格更新BS4,从4.3.0开始准确.

Answer 2

基于bisio的答案和Bootstrap 3代码,我能够为任何想要将完整的媒体查询集复制并粘贴到其样式表中的人提出更准确的答案:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

Answer 3

如果您正在使用LESS或SCSS/SASS并且您正在使用LESS/SCSS版本的Bootstrap,那么您也可以使用变量,前提是您可以访问它们.@ full-decent的答案的简短翻译如下:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

还有@screen-sm-max和的变量,分别@screen-md-max比通常使用的@screen-md-min和小1 和1个像素.@screen-lg-min@media(max-width)

编辑:如果您正在使用SCSS/SASS,变量以a $而不是a 开头@,所以它就是$screen-xs-max等等.

Answer 4

这些是来自Bootstrap3的值:

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}

Answer 5

这是两个例子.

一旦视口变为700px宽或更小,使所有h1标签为20px.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

使所有h1的20px直到视口达到700px或更大.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

希望这会有所帮助:0)

Answer 6

从Bootstrap v3.3.6开始,使用以下媒体查询,这些查询与概述可用响应类的文档相对应(http://getbootstrap.com/css/#responsive-utilities).

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

从Bootstrap GitHub存储库中提取的媒体查询来自以下较少的文件: -

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less

Answer 7

这是一个更模块化的例子,使用LESS模仿Bootstrap而不导入较少的文件.

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs only
@media(max-width: @screen-xs-max) {

}
//small and up
@media(min-width: @screen-sm-min) {

}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md and up
@media(min-width: @screen-md-min) {

}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg and up
@media(min-width: @screen-lg-min) {

}

Answer 8

基于其他用户的答案,我编写了这些自定义mixin以便于使用:

减少投入

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

用法示例

body {
  .when-lg({
    background-color: red;
  });
}

SCSS输入

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

用法示例:

body {
  @include when-md {
    background-color: red;
  }
}

产量

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}

Answer 9

或简单的Sass-Compass:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

例:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}

Answer 10

请记住,避免文本缩放是响应布局存在的主要原因.响应式网站背后的整个逻辑是创建功能布局,有效地显示您的内容,使其在多种屏幕尺寸上易于阅读和使用.

虽然在某些情况下有必要缩放文本,但请注意不要小型化您的网站并忽略这一点.

无论如何,这是一个例子.

@media(min-width:1200px){

    h1 {font-size:34px}

}
@media(min-width:992px){

    h1 {font-size:32px}

}
@media(min-width:768px){

    h1 {font-size:28px}

}
@media(max-width:767px){

    h1 {font-size:26px}

}

另请注意,480引导视图已在引导程序3中删除.

Answer 11

我们在Less文件中使用以下媒体查询来在网格系统中创建关键断点.

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

另见Bootstrap

Answer 12

您可以在我的示例中看到字体大小和背景颜色根据屏幕大小而变化

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}
/* Custom, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>