我使用Bootstrap 3来构建一个响应式布局,我想根据屏幕大小调整一些字体大小。 我如何使用媒体查询来实现这种逻辑?
当前回答
我们在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
其他回答
:)
在最新的bootstrap(4.3.1)中,使用SCSS(SASS),您可以使用来自/bootstrap/ SCSS /mixins/_breakpoints.scss的@mixin之一
至少是最小断点宽度的媒体。不查询最小的断点。 使@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;
}
}
文档:
介绍https://getbootstrap.com/docs/4.3/layout/overview/ responsive-breakpoints 迁移https://getbootstrap.com/docs/4.3/migration/ responsive-utilities 变量https://getbootstrap.com/docs/4.3/layout/grid/变量
快乐编码;)
如果你正在使用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等。
这些是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宽或更小,使所有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;
}
}
希望这能有所帮助:
或者简单的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;
}
}