引导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存储库中提取的媒体查询从以下较少的文件

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文档

你可以在引导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

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

使用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) {
}

引导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中没有“最低”设置，因为“特小”是默认设置。也就是说，你会首先编码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-05-20:版本3.4.1,4.6.0,5.0.0的信息仍然准确。

这里有两个例子。

一旦视口变成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;
  }
}

希望这能有所帮助:

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

虽然在某些情况下缩放文本是必要的，但要注意不要缩小你的网站，从而错过重点。

这里有一个例子。

@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中被删除了。