【问题标题】：Twitter Bootstrap 3: how to use media queries?Twitter Bootstrap 3：如何使用媒体查询？
【发布时间】：2013-08-27 19:14:38
【问题描述】：

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

【问题讨论】：

谷歌“媒体查询”然后检查how bootstrap has them set up

标签： css twitter-bootstrap media-queries

【解决方案1】：

这里有两个例子。

一旦视口变为 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)

【讨论】：

您在这两种情况下都使用font-size: 20px 作为h1 标签。为了更好地理解，您可能使用了不同的font-size 问题。顺便说一句，还可以。

【解决方案2】：

引导程序 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>

引导程序 4

这是 BS4 中使用的选择器。 BS4 中没有“最低”设置，因为“超小”是默认设置。 IE。您将首先对 XS 尺寸进行编码，然后再进行这些媒体覆盖。

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

引导程序 5

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

2021 年 5 月 20 日更新：从 3.4.1、4.6.0、5.0.0 版本开始，信息仍然准确。

【讨论】：

仅供参考，这可能对调试有用：SIZE XSSIZE SMSIZE MDSIZE LG
+1 用于通过增加屏幕尺寸来排序查询，与 BS3 的移动优先方法保持一致。
480px (@screen-xs) 怎么样？后来出现了吗？从here得到它。
为了与 BS3 保持一致，使用每个视口的默认屏幕尺寸变量。见：stackoverflow.com/a/24921600/2817112
@brejoc BS3+ 是“移动优先” - “XS”（移动）视图是 BS3+ 中的默认视图 ...

【解决方案3】：

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

虽然在某些情况下需要缩放文本，但请注意不要将您的网站小型化并错过重点。

这里还是一个例子。

@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 视口已在 bootstrap 3 中删除。

【讨论】：

【解决方案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){}

【讨论】：

这是正确答案。必须有“和”条件
要允许大屏幕使用中屏 css 中的 css，请删除 and 条件。 @JasonMiller 所以它不是一个“必须”，它取决于模板的规格和要求。

【解决方案5】：

如果您使用的是 LESS 或 SCSS/SASS，并且您使用的是 LESS/SCSS 版本的 Bootstrap，那么您也可以使用 variables，前提是您可以访问它们。 @full-decent 的答案的 LESS 翻译如下：

@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 和@screen-lg-min 小1 个像素，通常用于@media(max-width)。

编辑：如果您使用的是 SCSS/SASS，variables 以 $ 开头而不是 @，所以它会是 $screen-xs-max 等。

【讨论】：

当我想编辑 .grid.less 上的数据时，总是从主样式覆盖。是否有任何解决方案，或者我只需要我在媒体查询中添加的所有样式来添加 !important ？
我无法让它工作。如果我使用硬编码数字以外的任何内容，编译器会报错。
@JesseGoodfellow 上面的示例使用 LESS 语法；如果您使用的是 SASS/SCSS github.com/twbs/bootstrap-sass/blob/master/vendor/assets/…，则需要 $screen-xs-max 等。（如果您在本地使用 LESS/SCSS 但导入了 CSS 版本的 Bootstrap，那么您完全不走运。）
@screen-tablet、@screen-desktop 和 @screen-lg-desktop 已被弃用。可能是时候更新您已经很棒的答案了。 ;-)
假设您正在构建引导程序；这应该被标记为答案

【解决方案6】：

根据 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) {

}

【讨论】：

这里高票的答案只用min-width，但你也用过max-width，那有什么区别？，有必要吗？
bootstrap 如何知道手机是否处于竖屏模式？
@SuperUberDuper 它没有。它只是根据视口的水平尺寸而不是屏幕布局来处理元素。
顺序不应该是从低到高吗？

【解决方案7】：

这是一个更简单的一站式解决方案，包括基于媒体查询的单独响应文件。

这允许所有媒体查询逻辑和包含逻辑只需要存在于一个页面上，即加载程序。它还允许媒体查询不会使响应式样式表本身混乱。

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

base.less 看起来像这样

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

sm-min.less 看起来像这样

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

您的索引只需要加载 loader.less

<link rel="stylesheet/less" type="text/css" href="loader.less" />

简单易懂..

【讨论】：

嗨，我正在尝试在引导程序中使用 2 天后的更少，但仍在尝试。你能帮我减少在 Windows 上的使用吗？我阅读了很多 tuts 和文章，但没有找到合适的解决方案，我认为您可以帮助我。提前致谢
您需要确保包含较少的 javascript 库，然后您的应用程序将知道如何处理这些文件。如何在应用程序中包含更少内容取决于您。我使用在 github 上找到的一个库，通过assetic。你不必那样做。您可以只包含 javascript 文件，然后通过标准的 css 样式元标记加载您的 less 文件。你不用担心编译。该信息在这里。 lesscss.org/#client-side-usage.

【解决方案8】：

我们在 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

【讨论】：

【解决方案9】：

引导程序 3

对于 Bootstrap 3 (v3.4.1) 的最终版本，使用了以下媒体查询，这些查询与概述可用响应类的文档相对应。 https://getbootstrap.com/docs/3.4/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 存储库从以下 less 文件中提取的媒体查询：-

https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L283 https://github.com/twbs/bootstrap/blob/v3.4.1/less/responsive-utilities.less

引导程序 5

从版本 5 的文档中，您可以看到自版本 3 以来媒体查询断点已更新，以更好地适应现代设备尺寸。

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

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

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

来源：Bootstrap 5 Documentation

您可以在 Bootstrap GitHub 存储库中查看 v5.1.3 的断点：-

https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L461 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_breakpoints.scss

于 2021 年 12 月 19 日更新

【讨论】：

【解决方案10】：

这是一个更加模块化的示例，它使用 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) {

}

【讨论】：

试过这个。完美运行！

【解决方案11】：

或简单的 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;
    }
}

【讨论】：

谢谢。我一直在寻找提供引导 sass 混合的示例的东西（引导自己的示例对所有内容都很复杂）。这解释了很多！ :)

【解决方案12】：

@media 仅屏幕和（最大宽度：1200 像素）{}

@media 仅屏幕和（最大宽度：979px）{}

@media 仅屏幕和（最大宽度：767px）{}

@media 仅屏幕和（最大宽度：480 像素）{}

@media 仅屏幕和（最大宽度：320 像素）{}

@media（最小宽度：768px）和（最大宽度：991px）{}

@media（最小宽度：992px）和（最大宽度：1024px）{}

【讨论】：

【解决方案13】：

对 IE 使用媒体查询；

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

【讨论】：

【解决方案14】：

根据其他用户的回答，我编写了这些自定义 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;
  }
}

【讨论】：

【解决方案15】：

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

<!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>

【讨论】：

【解决方案16】：

改善主要反应：

您可以使用<link> 标记（它支持媒体查询）的media 属性来仅下载用户需要的代码。

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

这样，浏览器将下载所有 CSS 资源，而不管 media 属性如何。 不同之处在于，如果 media 属性的 media-query 被评估为 false 则该 .css 文件及其内容将不会被渲染阻塞。

因此，建议在<link>标签中使用media属性，因为它可以保证更好的用户体验。

您可以在此处阅读有关此问题的 Google 文章 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

一些工具可以帮助您根据媒体查询自动将 css 代码分离到不同的文件中

网页包 https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

【讨论】：

【解决方案17】：

:)

在最新的引导程序 (4.3.1) 中，使用 SCSS(SASS) 您可以使用来自 /bootstrap/scss/mixins/_breakpoints.scss 的 @mixin 之一

至少具有最小断点宽度的媒体。不查询最小断点。使@content 应用于给定的断点并且更宽。

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

最大断点宽度的媒体。没有查询最大断点。使@content 应用于给定的断点并且更窄。

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

跨越多个断点宽度的媒体。使@content 在最小和最大断点之间应用

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

断点的最小和最大宽度之间的媒体。最小断点没有最小值，最大断点没有最大值。使@content 仅适用于给定断点，而不是更宽或更窄的视口。

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

例如：

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

文档：

编码愉快 ;)

【讨论】：

【解决方案18】：

Bootstrap 主要在我们的 Sass 源文件中为我们的布局、网格系统和组件使用以下媒体查询范围（或断点）。

超小型设备（纵向手机，小于 576 像素） xs 没有媒体查询，因为这是 Bootstrap 中的默认设置

小型设备（横向手机，576px 及以上）

@media (min-width: 576px) { ... }

中型设备（平板电脑，768 像素及以上）

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

大型设备（台式机，992 像素及以上）

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

超大型设备（大型桌面，1200 像素及以上）

@media (min-width: 1200px) { ... }

由于我们在 Sass 中编写源 CSS，我们所有的媒体查询都可以通过 Sass mixins 获得：

xs 断点不需要媒体查询，因为它实际上是@media (min-width: 0) { ... }

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

如需深入了解，请点击以下链接

https://getbootstrap.com/docs/4.3/layout/overview/

【讨论】：