我使用Bootstrap 3来构建一个响应式布局，我想根据屏幕大小调整一些字体大小。 我如何使用媒体查询来实现这种逻辑?
当前回答
基于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) {
}
其他回答
这里有两个例子。
一旦视口变成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;
}
}
希望这能有所帮助:
在我的例子中，你可以看到字体大小和背景颜色根据屏幕大小而变化
<!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文件中使用以下媒体查询在网格系统中创建关键断点。
/* 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
引导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的信息仍然准确。
@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) {}
