我正在尝试在v5.1.3中为基本字体标记全局启用Bootstrap的RFS功能。
在我的SCSS中,我设置了一些基本的字体大小,包括 Bootstrap 的scss文件,并设置了字体大小。但在编译的CSS中,字体大小仍然是rem。
SCSS:
//Fonts
$font-size-root: 20px;
$font-size-base: 1rem;
$enable-responsive-font-sizes: true;
$enable-rfs: true;
$h1-font-size: $font-size-root * 1.8;
$h2-font-size: $font-size-root * 1.5;
$h3-font-size: $font-size-root * 1;
$h4-font-size: $font-size-root * 0.75;
$h5-font-size: $font-size-root * 0.5;
$h6-font-size: $font-size-root * 0.25;
$small-font-size: $font-size-root * 0.75;
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size,
7: $small-font-size,
);
@import "Boostrap/bootstrap.scss";
body {
@include font-size($font-size-base);
//border-style: solid;
h1 {
@include font-size($h1-font-size);
font-weight: bold;
}
h2 {
@include font-size($h2-font-size);
}
h3 {
@include font-size($h3-font-size);
}
h4 {
@include font-size($h4-font-size);
}
h5 {
@include font-size($h5-font-size);
}
h6 {
@include font-size($h6-font-size);
}
p {
@include font-size($font-size-root);
}
.btn {
@include font-size($btn-font-size);
}
}
但编译后的CSS看起来像这样:
body {
font-size: 1rem;
}
body h1, body .h1 {
font-size: calc(1.35rem + 1.2vw);
font-weight: bold;
}
@media (min-width: 1200px) {
body h1, body .h1 {
font-size: 2.25rem;
}
}
body h2, body .h2 {
font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
body h2, body .h2 {
font-size: 1.875rem;
}
}
body h3, body .h3 {
font-size: 1.25rem;
}
body h4, body .h4 {
font-size: 0.9375rem;
}
body h5, body .h5 {
font-size: 0.625rem;
}
body h6, body .h6 {
font-size: 0.3125rem;
}
body p {
font-size: 1.25rem;
}
body .btn {
font-size: 1rem;
}
是我遗漏了什么还是我完全理解错了这个功能?最让我烦恼的是p标签。它根本没有响应。
1条答案
按热度按时间guykilcj1#
不同的设备我有不同的尺寸。也许有更好的解决方案。告诉我。但是这个解决方案很有效。
示例:
以及: