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

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

这里有一个例子。

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

:)

在最新的bootstrap(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;
  }
}

文档:

介绍https://getbootstrap.com/docs/4.3/layout/overview/ responsive-breakpoints 迁移https://getbootstrap.com/docs/4.3/migration/ responsive-utilities 变量https://getbootstrap.com/docs/4.3/layout/grid/变量

快乐编码;)

这些是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){}

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

引导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的信息仍然准确。

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