我使用Bootstrap 3来构建一个响应式布局，我想根据屏幕大小调整一些字体大小。 我如何使用媒体查询来实现这种逻辑?
当前回答
这里有一个更简单的一站式解决方案，包括基于媒体查询的独立响应文件。
这允许所有媒体查询逻辑和包含逻辑只存在于一个页面，即加载器。它还允许媒体查询不会使响应式样式表本身混乱。
//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, i.e. 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
* 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。更少的会像这样
/**
* 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" />
很简单…
其他回答
基于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;
}
}
希望这能有所帮助:
引导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(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来模拟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) {
}
