我使用Bootstrap 3来构建一个响应式布局，我想根据屏幕大小调整一些字体大小。 我如何使用媒体查询来实现这种逻辑?
当前回答
在我的例子中，你可以看到字体大小和背景颜色根据屏幕大小而变化
<!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>
其他回答
如果你正在使用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等。
:)
在最新的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/变量
快乐编码;)
请记住，避免文本缩放是响应式布局存在的主要原因。响应式网站背后的整个逻辑是创建功能布局，有效地显示你的内容，使其在多种屏幕尺寸上易于阅读和使用。
虽然在某些情况下缩放文本是必要的，但要注意不要缩小你的网站，从而错过重点。
这里有一个例子。
@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中被删除了。
@media only screen和(max-width: 1200px) {} @media only screen (max-width: 979px) {} @media only screen (max-width: 767px) {} @media only screen和(max-width: 480px) {} @media only screen and (max-width: 320px) {} @media (min-width: 768px) and (max-width: 991px) {} @media (min-width: 992px) and (max-width: 1024px) {}
下面是一个更模块化的例子，使用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) {
}
