Twitter Bootstrap 3:如何使用媒体查询?
我使用Bootstrap 3来构build一个响应式布局,根据屏幕大小调整几个字体大小。 我如何使用媒体查询来制作这种逻辑?
这里是BS3中使用的select器,如果你想保持一致:
@media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){}
这里是BS4中使用的select器。 BS4中没有“最低”设置,因为“超小”是默认设置。 也就是说,您将首先编码XS大小,然后再重写这些媒体。
@media(min-width:576px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){}
更新2017-01-19:版本3.3.7的BS3信息仍然是准确的,在4.0.0b1发布的新的网格更新BS4。
根据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) { }
如果您使用的是LESS或SCSS / SASS,并且您使用的是Bootstrap的LESS / SCSS版本,则也可以使用variables ,前提是您可以访问它们。 @ full-decent的答案的最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
variables,分别比@screen-md-min
和@screen-lg-min
小1个像素,通常用于@media(max-width)
。
编辑:如果你使用SCSS / SASS, variables以$
而不是@
开头,所以它会是$screen-xs-max
等。
这些是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){}
这里有两个例子。
一旦视口变成700px宽或更less使所有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; } }
希望这有助于:0)
下面是一个更加模块化的例子,使用LESS来模拟Bootstrap而不导入更less的文件。
@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) { }
从Bootstrap 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) {}
从Bootstrap GitHub存储库中提取的媒体查询从以下less量文件中提取:
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
根据其他用户的回答,我编写了这些自定义混合以便于使用:
input较less
.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; }); }
SCSSinput
@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; } }
或者简单的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; } }
请记住,避免文本缩放是响应式布局存在的主要原因。 响应式网站背后的整个逻辑就是创buildfunction性布局,有效地显示您的内容,以便在多种屏幕尺寸上轻松读取和使用。
尽pipe在某些情况下需要缩放文本,但请注意不要小型化您的网站并忽略这一点。
inheritance人无论如何是一个例子。
@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中。
我们在Less文件中使用以下媒体查询来在我们的网格系统中创build关键断点。
/* 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
你可以在我的例子中看到字体大小和背景颜色是根据屏幕大小而改变的
<!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>
这是一个更简单的一站式解决scheme,包括基于媒体查询的单独响应文件。
这允许所有的媒体查询逻辑和包含逻辑只需要存在于一个页面上的加载器。 它也允许不让媒体查询混乱自己的响应式样式表。
//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, ie 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" />
十分简单..
@media唯一的屏幕和(最大宽度:1200px){}
@media唯一的屏幕和(最大宽度:979px){}
@media唯一的屏幕和(最大宽度:767px){}
@media只有屏幕和(最大宽度:480px){}
@media只有屏幕和(最大宽度:320px){}
@media(min-width:768px)和(max-width:991px){}
@media(min-width:992px)和(max-width:1024px){}
使用媒体查询的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) { }