引导断点用于字体大小为h1-h6

我只是想知道是否有任何方法，我可以使用断点(sm,md,lg,xl..等)为bootstrap提供的字体大小，它们是:

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

但是我想用这些，它不起作用。如下图所示。

<p class="fs-sm-4 fs-md-3 fs-lg-2">Hello, This is Me</p>

如有任何帮助，不胜感激。

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<p class="fs-sm-4 fs-md-3 fs-lg-2">Hello, This is Me</p>
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

你知道如何使用SASS吗?我之前也遇到过同样的问题，我是这样解决的。好吧，您必须更改版本5的bootstrap的断点，但这很容易。

我是这样做的:

h1.title{
@include fontSize(16px, 16px, 20px, 24px, 32px);
}
p{
@include fontSize(12px, 12px, 14px, 14px, 16px);
}
mixin-fontSize.scss v1
@mixin fontSize($all: '', $sm: '', $md: '', $lg: '', $xl: ''){
@if($all != ''){
font-size:$all;
};
@if($sm != ''){
@media all and(min-width:576px){font-size:$sm}
};
@if($md != ''){
@media all and(min-width:768px){font-size:$md}
};
@if($lg != ''){
@media all and(min-width:992px){font-size:$lg}
};
@if($xl != ''){
@media all and(min-width:1200px){font-size:$xl}
};
};

h1.title {
font-size: 16px;
}
@media all and (min-width: 576px) {
h1.title {
font-size: 16px;
}
}
@media all and (min-width: 768px) {
h1.title {
font-size: 20px;
}
}
@media all and (min-width: 992px) {
h1.title {
font-size: 24px;
}
}
@media all and (min-width: 1200px) {
h1.title {
font-size: 32px;
}
}
p {
font-size: 12px;
}
@media all and (min-width: 576px) {
p {
font-size: 12px;
}
}
@media all and (min-width: 768px) {
p {
font-size: 14px;
}
}
@media all and (min-width: 992px) {
p {
font-size: 14px;
}
}
@media all and (min-width: 1200px) {
p {
font-size: 16px;
}
}

<h1 class="title">Test</h1>
<p>Test</p>

相关内容

最新更新

热门标签：