我使用Bootstrap 3来构建一个响应式布局，我想根据屏幕大小调整一些字体大小。 我如何使用媒体查询来实现这种逻辑?
当前回答
下面是一个更模块化的例子，使用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) {
}
其他回答
如果你正在使用LESS或SCSS/SASS，并且你正在使用Bootstrap的LESS/SCSS版本，你也可以使用变量，只要你能访问它们。@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变量，它们分别比@screen-md-min和@screen-lg-min小1个像素，通常用于@media(max-width)。
编辑:如果你使用SCSS/SASS，变量以$开始，而不是@，所以它会是$screen-xs-max等。
或者简单的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;
}
}
下面是一个更模块化的例子，使用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) {
}
这里有两个例子。
一旦视口变成700px宽或更小，使所有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;
}
}
希望这能有所帮助:
引导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的信息仍然准确。
