用ChatGPT解决这个技术问题 Extra ChatGPT

在 Bootstrap 3 media queries documentation 上它说：

我们在 Less 文件中使用以下媒体查询在网格系统中创建关键断点。超小型设备（手机，小于 768 像素）：无媒体查询，因为这是 Bootstrap 中的默认设置 小型设备（平板电脑，768 像素及以上）：@media (min-width: @screen-sm-min) { ... }中型设备（台式机，992 像素及以上）：@media（最小宽度：@screen-md-min）{ ... } 大型设备（大型台式机，1200 像素及以上）：@media（最小宽度：@screen- lg-min) { ... }

我们是否也应该能够在媒体查询中使用 @screen-sm、@screen-md 和 @screen-lg 名称？因为它对我不起作用。我必须先使用像素测量值，例如 @media (min-width: 768px) {...}，然后它才能工作。难道我做错了什么？

此外，对于超小型设备的 480 像素的引用是错字吗？那不应该说高达767px吗？ （因为从文档中删除）

stackoverflow.com/questions/24066059/…
以下是 BS4 中使用的选择器。 BS4 中没有“最低”设置，因为“特小”是默认设置。即，您将首先对 XS 尺寸进行编码，然后再对这些媒体进行覆盖。 @media(min-width:576px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){}

S
Sophy

Bootstrap 5 媒体查询和断点 

// 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) { ... }

最小宽度 

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
    display: none;
}
@include media-breakpoint-up(sm) {
   .custom-class {
       display: block;
   }
}

最大宽度 

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
    display: block;
    }
}

Bootstrap 4 媒体查询和断点 

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

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

Bootstrap 4 在 Sass 中提供了源 CSS，您可以通过 Sass Mixins 将其包含在内： 

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Bootstrap 3 媒体查询和断点 

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

Bootstrap 2.3.2 媒体查询和断点 

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

资源：

引导 5.2：https://getbootstrap.com/docs/5.2/layout/breakpoints/

引导程序 4.6：https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints

引导 3.4：https://getbootstrap.com/docs/3.4/css/#grid-media-queries

引导 2.3.2：https://getbootstrap.com/2.3.2/scaffolding.html#responsive

@CyrilDuchon-Doris，问题是关于 Bootstrap 3 ......所以我不这么认为。
答案获得了 30 分，并提到了 Bootstrap 2。即使不使用 Bootstrap 3，很多人也会看看它。我总是非常感谢那些用最新信息编辑自己的答案的人，即使稍微有点过时的初始范围。
那么低于 479 的东西是不是特别小？
Bootstrap v4 甚至还不稳定。你知道吗？答案可能需要多次更新才能达到稳定版本。
我相信这里有一个像素错误，实际上可能会产生影响。对于 1200px 和 320px 的屏幕，最大媒体查询和最小媒体查询都会生效。所有最大媒体查询应为负 1 像素（例如 1199 像素）。最小和最大 320px 媒体查询对我来说真的没有意义，因为 AFAIK 实际上屏幕从 320px 开始。
C
Community

Bootstrap 没有很好地记录媒体查询。 @screen-sm、@screen-md、@screen-lg 的那些变量实际上是指 LESS 变量而不是简单的 CSS。

当您自定义 Bootstrap 时，您可以更改媒体查询断点，并且当它编译时，@screen-xx 变量将更改为您定义为 screen-xx 的任何像素宽度。这就是这样的框架可以被编码一次然后由最终用户定制以满足他们的需求的方式。

这里有一个类似的问题，可能会更清楚：Bootstrap 3.0 Media queries

在您的 CSS 中，您仍然必须使用传统的媒体查询来覆盖或添加 Bootstrap 正在执行的操作。

关于你的第二个问题，这不是错字。一旦屏幕低于 768 像素，框架就会变得完全流畅并在任何设备宽度下调整大小，从而无需断点。存在 480px 处的断点是因为移动优化的布局发生了特定的变化。

要查看实际效果，请访问他们网站 (http://getbootstrap.com/examples/navbar-fixed-top/) 上的此示例，然后调整窗口大小以查看 768 像素后它如何处理设计。

要查看实际效果，请访问他们网站上的此示例，然后调整窗口大小以查看 768 像素后它如何处理设计。 // 这和 480px 有什么关系？与 500 像素相比，我没有看到 480 像素发生任何不同。
就在 Bootstrap 3 的变量系统上自然扩展而言，这应该是公认的答案，因为它是一种非常有效的方法。
D
Dave Powers

此问题已在 https://github.com/twbs/bootstrap/issues/10203 中讨论过，由于兼容性原因，目前尚无更改 Grid 的计划。

您可以从此分支获取 Bootstrap，分支 hs：https://github.com/antespi/bootstrap/tree/hs

这个分支在 480px 处给你一个额外的断点，所以你必须：

移动优先设计（XS，小于 480 像素）在您的 HTML 中添加 HS（水平小型设备）类：col-hs-*，visible-hs，...并为水平移动设备设计（HS，小于 768 像素）设计用于平板设备（SM，小于 992px） 为桌面设备设计（MD，小于 1200px） 为大型设备设计（LG，大于 1200px）

首先设计移动端是理解 Bootstrap 3 的关键。这是 BootStrap 2.x 的主要变化。作为规则模板，您可以遵循以下规则（在 LESS 中）： 

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}
抱歉，我不明白这个分叉的附加值。据我了解，您这样做@screen-hs-min:@screen-xs;。为什么不在这里直接使用 @screen-xs 呢？
只是为了更好的理解。该变量为模板提供了视觉一致性。 Bootstrap 3 是移动优先，因此媒体查询之外的所有规则都适用于移动设备大小。然后，如果您需要 HS 的额外规则，您将在 min-width: @screen-hs-min 中写下，如果您需要 SM 的 estra 规则，您将在 min-width: @screen-sm-min 中写下，依此类推。这个 fork 用于在 480px 处添加一个新的断点。然后移动尺寸低于 480 像素，新尺寸 (HS) 出现在 480 像素和 768 像素之间
请注意，模板有一点错字。 screen-hs-min 应该是 screen-xs-min
@eflat 这不是拼写错误，screen-hs-min 是 screen-xs-min 和 screen-sm-min 之间的新规则
E
Enrico

我知道这有点老了，但我想我会做出贡献。根据@Sophy 的回答，这就是我添加 .xxs 断点的方法。我没有处理可见内联、table.visible 等类。 

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
正是我需要的谢谢！所以我不需要再做一遍:)
此外，无论何时覆盖 .visible-xs，都不要忘记类 .visible-xs-inline, .visible-xs-inline-block！
A
Anthony

对 480px 的引用已被删除。相反，它说： 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Bootstrap 3 中没有低于 768px 的断点。

如果您想使用 @screen-sm-min 和其他 mixin，那么您需要使用 LESS 进行编译，请参阅 http://getbootstrap.com/css/#grid-less

下面是有关如何使用 Bootstrap 3 和 LESS 的教程：http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

D
Dave Powers

如果您使用 http://lesscss.org/ 构建 CSS，您应该能够使用这些断点。 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* 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) {  }

来自https://getbootstrap.com/docs/3.4/css/#grid-media-queries

事实上，@screen-sm-min 是一个变量，当使用 Less 构建时，它会被 _variable 中指定的值替换。如果您不使用 Less，则可以将此变量替换为以下值： 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

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

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

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

Bootstrap 3 正式支持 Sass：https://github.com/twbs/bootstrap-sass。如果你使用的是 Sass（你应该），语法会有点不同。 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* 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) {  }
B
Babbandeep Singh

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

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

对于引导程序 3，我的导航栏组件中有以下代码 

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

那么你可以使用类似的东西 

@media wide { selector: style }

这使用您将变量设置为的任何值。

转义允许您使用任意字符串作为属性或变量值。 ~"anything" 或 ~'anything' 中的任何内容都按原样使用，除了插值外没有任何变化。

http://lesscss.org

J
Julian

为了在依赖旧 Bootstrap 版本的项目中并行使用 Bootstrap 4 的 mixin，您可以尝试使用 alias via npm 安装这两者： 

npm i bootstrap-3@npm:bootstrap-sass@\^3 bootstrap-4@npm:bootstrap@\^4 bootstrap-5@npm:bootstrap@\^5 bootstrap

注意：此命令安装版本 3、4、5 和最新版本。如果只需要 3 和 4，请进行调整！由于空间的原因，我通过符号链接使用 node_modules 并且我需要跨项目的所有这些:-)

然后得到你需要的部分： 

// Bootstrap 3
@import '../../../node_modules/bootstrap-3/assets/stylesheets/_bootstrap.scss';

// Extend: Bootstrap 4 Media Queries
@import "../../../node_modules/bootstrap-4/scss/_functions.scss";
@import "../../../node_modules/bootstrap-4/scss/_variables.scss";
@import '../../../node_modules/bootstrap-4/scss/mixins/_breakpoints.scss';

当然是调整路径！

如果有任何效果，您现在可以使用： 

@include media-breakpoint-up(sm) {}

在引导程序 3 中。

否则，用搜索替换 mixins / 用 px 替换。

ß
ßãlãjî

附有示例的 Bootstrap 4 媒体查询

@media (min-width: 576px) { .responsive{ color:red } } // 中型设备（平板电脑，768px 及以上）@media (min-width: 768px) { .responsive{ color:orange } } // 大devices (desktops, 992px and up) @media (min-width: 992px) { .responsive{ color:blue } } // 超大设备（大型桌面，1200px 及以上）@media (min-width: 1200px) { . responsive{ color:green } }

Bootstrao 4

在这里查看颜色

V
V-rund Puro-hit 
@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.