如何使 bootstrap 标题响应?
How to make bootstrap headings responsive?
我正在制作一个 bootstrap 网站。一切在所有屏幕尺寸上都运行顺利,但标题(h1)保持固定大小。对于小屏幕来说太大了。我该如何修复 bootstrap h1 或一般标题。
你可以用 @media
来做这个
@media screen and (max-width: 768px) {
h1{
font-size:14px;
}
}
这意味着小于 768px 的 h1 标签字体大小将为 14px。
您可以像这样设置您需要的所有像素。
最好在您自己的 sass 中使用 bootstrap sass,保持干燥和可维护
@import "../bootstrap-sass/bootstrap/variables";
@media screen and (max-width: $screen-md-max) {
h1 {
font-size:14px;
}
}
这就是我的解决方案。完全响应 bootstrap 个标题
@import "bootstrap/scss/functions.scss";
@import "bootstrap/scss/variables.scss";
@import "bootstrap/scss/mixins.scss";
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.h1#{$infix} { font-size: $h1-font-size!important; }
.h2#{$infix} { font-size: $h2-font-size!important; }
.h3#{$infix} { font-size: $h3-font-size!important; }
.h4#{$infix} { font-size: $h4-font-size!important; }
.h5#{$infix} { font-size: $h5-font-size!important; }
.h6#{$infix} { font-size: $h6-font-size!important; }
.display-1#{$infix} {
font-size: $display1-size!important;
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2#{$infix} {
font-size: $display2-size!important;
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3#{$infix} {
font-size: $display3-size!important;
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4#{$infix} {
font-size: $display4-size!important;
font-weight: $display4-weight;
line-height: $display-line-height;
}
}
}
我正在制作一个 bootstrap 网站。一切在所有屏幕尺寸上都运行顺利,但标题(h1)保持固定大小。对于小屏幕来说太大了。我该如何修复 bootstrap h1 或一般标题。
你可以用 @media
来做这个
@media screen and (max-width: 768px) {
h1{
font-size:14px;
}
}
这意味着小于 768px 的 h1 标签字体大小将为 14px。
您可以像这样设置您需要的所有像素。
最好在您自己的 sass 中使用 bootstrap sass,保持干燥和可维护
@import "../bootstrap-sass/bootstrap/variables";
@media screen and (max-width: $screen-md-max) {
h1 {
font-size:14px;
}
}
这就是我的解决方案。完全响应 bootstrap 个标题
@import "bootstrap/scss/functions.scss";
@import "bootstrap/scss/variables.scss";
@import "bootstrap/scss/mixins.scss";
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.h1#{$infix} { font-size: $h1-font-size!important; }
.h2#{$infix} { font-size: $h2-font-size!important; }
.h3#{$infix} { font-size: $h3-font-size!important; }
.h4#{$infix} { font-size: $h4-font-size!important; }
.h5#{$infix} { font-size: $h5-font-size!important; }
.h6#{$infix} { font-size: $h6-font-size!important; }
.display-1#{$infix} {
font-size: $display1-size!important;
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2#{$infix} {
font-size: $display2-size!important;
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3#{$infix} {
font-size: $display3-size!important;
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4#{$infix} {
font-size: $display4-size!important;
font-weight: $display4-weight;
line-height: $display-line-height;
}
}
}