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


Answers:


651

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

更新2019-02-11:BS3信息从3.4.0版本开始仍然是准确的,更新了针对新网格的BS4,从4.3.0开始是准确的。


116
仅供参考,这可能对调试有用:<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>
William Entriken 2013年

14
+1用于通过增加屏幕尺寸来排序查询,与BS3的移动优先方法保持一致。
杰克·伯杰

5
480px(@ screen-xs)呢?以后出现了吗?从这里得到它。
brejoc 2014年

1
为了与BS3一致,每个视口使用默认的屏幕尺寸变量。请参阅:stackoverflow.com/a/24921600/2817112
Oriol

1
@brejoc BS3 +是“移动优先”的-“ XS”(移动)视图是BS3 +中的默认视图...
jave.web

252

基于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,所以有什么区别?有必要吗?
shaijut

引导程序如何知道手机是否处于纵向模式?
SuperUberDuper

@SuperUberDuper它不是。它只是根据视口的水平大小而不是屏幕布局来处理元素。
克里斯·克洛尔

订单应该从低到高吗?
囚犯零

134

如果您使用的是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个像素。@screen-lg-min@media(max-width)

编辑:如果您使用的是SCSS / SASS,则变量以a $而不是a 开头@,因此将为$screen-xs-maxetc。


1
当我想在.grid.less上编辑数据时,总是会被主要样式覆盖。有什么解决方案还是我只需要在媒体查询中添加的所有样式即可添加!important?
edonbajrami 2014年

2
我无法使它正常工作。编译器会抱怨我是否使用除硬编码数字以外的其他任何内容。
laertiades 2014年

7
@JesseGoodfellow上面的示例使用LESS语法;如果您使用的是SASS / SCSSgithub.com/twbs/bootstrap-sass/blob/master/vendor/assets/…,则需要这样$screen-xs-max。(如果您在本地使用LESS / SCSS但要导入CSS版本
-Bootstrap

2
@screen-tablet@screen-desktop@screen-lg-desktop已被弃用。可能是时候更新您已经很棒的答案了。;-)
Slipp D. Thompson 2014年

2
假设您正在建立引导程序;这应该标记为答案
sidonaldson

44

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

4
这是正确的答案。必须具有“和”条件
Jason Miller

要允许大屏幕使用中屏幕CSS中的CSS,请删除and条件。@JasonMiller,所以它并不是完全“必须”,它取决于模板的规格和要求。
Onimusha

29

这是两个例子。

一旦视口变为700像素或更小,使所有h1标签都变为20像素。

@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了有疑问的其他用法。顺便说一句,还可以。
fWd82

21

这是一个使用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) {

}

试过这个。完美的作品!
Tomas Gonzalez

21

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

20

从Bootstrap v3.3.6开始,将使用以下媒体查询,这些媒体查询与概述可用响应类的文档(http://getbootstrap.com/css/#sensitive-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/response-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less


12

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

谢谢。我一直在寻找能够提供Bootstrap Sass Mixin示例的东西(Bootstrap自己的示例包含所有内容)。这解释了很多!:)
CleverNode 2015年

11

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

尽管在某些情况下有必要缩放文本,但是请注意不要缩小站点大小,以免错过重点。

反正这是一个例子。

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


6

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


5

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

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


2

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

这允许所有媒体查询逻辑和包含逻辑仅必须存在于一页(加载程序)中。它还允许媒体查询本身不会使响应样式表混乱。

//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" />

十分简单..


嗨,我正在尝试在Bootstrap中从2天开始减少使用,但仍在尝试。您能不能帮我减少在Windows上的使用。我阅读了大量的文章和文章,但找不到合适的解决方案,我认为您可以为我提供帮助。在此先感谢
Muddasir Abbas 2015年

您需要确保包含较少的javascript库,然后您的应用程序将知道如何处理这些文件。如何减少应用程序的数量取决于您。我通过资产使用了在github上找到的库。您不必这样做。您可以只包含javascript文件,然后通过标准CSS样式元标记加载较少的文件。您不必担心编译。该信息在这里。lesscss.org/#client-side-usage
blamb

2

Bootstrap主要在源Sass文件中为布局,网格系统和组件使用以下媒体查询范围(或断点)。

超小型设备(纵向电话,小于576px)无媒体查询,xs因为这是Bootstrap中的默认设置

小型设备(横向手机,576像素及以上)

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

中型设备(平板电脑,768像素及以上)

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

大型设备(台式机,992px及以上)

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

超大型设备(大型台式机,1200px及以上)

@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/


1

@media only屏幕和(最大宽度:1200px){}

@media only屏幕和(最大宽度:979px){}

@media only屏幕和(最大宽度:767px){}

@media only屏幕和(最大宽度:480px){}

@media only屏幕和(最大宽度:320像素){}

@media(最小宽度:768像素)和(最大宽度:991像素){}

@media(最小宽度:992px)和(最大宽度:1024px){}


0

对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) {
}

0

:)

在最新的引导程序(4.3.1)中,可以使用SCSS(SASS)使用@mixin中的一种 /bootstrap/scss/mixins/_breakpoints.scss

至少具有最小断点宽度的介质。不查询最小的断点。使@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;
  }
}

说明文件:

快乐的编码;)


-1

改善主要回应:

您可以使用标记的media属性<link>(它支持媒体查询),以便仅下载用户所需的代码。

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

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

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

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

一些工具可以帮助您根据媒体查询自动将CSS代码分隔在不同文件中

Webpack 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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.