Twitter的引导3：如何使用媒体查询？Twitter的引导3：如何使用媒体查询？(Twitter

我使用的是引导3打造一个负责任的布局，我想根据屏幕大小调整一些字体大小。 如何使用媒体查询做出这样的逻辑？

Answer 1:

引导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年2月11日：BS3信息仍然是准确的3.4.0版本，新的格栅，准确的4.3.0更新BS4。

Answer 2:

基于BISIO的回答和引导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) {

}

Answer 3:

如果您使用小于或SCSS / SASS和你使用引导的LESS / SCSS版本，你可以使用变量为好，只要你有对它们的访问。 的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 ，这是1个像素小于@screen-md-min和@screen-lg-min ，分别典型地用于在使用@media(max-width) 。

编辑：如果您使用SCSS /上海社会科学院， 变量与启动$ ，而不是@ ，所以这将会是$screen-xs-max等。

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

Answer 5:

这里有两个例子。

一旦成为视口宽700像素或更低使所有H1标签20像素。

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

让所有的H1的20像素，直至达到视或700像素更大。

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

希望这有助于：0）

Answer 6:

下面是使用更少的模拟引导，而不用导入减档更加模块化的例子。

@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) {

}

Answer 7:

由于自举v3.3.6的以下介质查询用于与该概述了响应类，是可用的（文档对应http://getbootstrap.com/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) {}

媒体查询从以下减档的引导GitHub的仓库中取出： -

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less

Answer 8:

根据其他用户的答案，我写这些自定义的混入，方便使用：

投入少

.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;
  }
}

Answer 9:

或简单的萨斯指南针：

@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;
    }
}

Answer 10:

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

虽然是必要的规模在某些情况下的文字，要小心，不要小型化您的网站，错过了这一点。

下面有一个例子无论如何。

@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下降。

Answer 11:

我们用我们的减档以下媒体查询来创建我们的电网系统中的关键断点。

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

另见引导

Answer 12:

你可以在我的例子字体大小和背景颜色看到根据屏幕大小正在发生变化

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

Answer 13:

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

这让所有的媒体查询逻辑，包括逻辑只有一个页面，加载程序上存在。 它也允许不具备媒体查询弄乱响应样式本身。

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

十分简单..

Answer 14:

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

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

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

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

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

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

@media（最小宽度：992px）和（最大宽度：1,024）{}

Answer 15:

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

Answer 16:

为了提高主反应：

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

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

这样，浏览器会下载所有的CSS资源，不管媒体属性。 所不同的是，如果媒体属性的媒体查询被评估为假 ，则该.css文件，他的内容将不会被阻止呈现。

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

在这里，你可以阅读有关此问题的谷歌文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

有些工具，将帮助您根据您的媒体querys自动的在不同的文件你的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

文章来源: Twitter Bootstrap 3: how to use media queries?