文章/答案/技术大牛

发布

社区首页 >问答首页 >h1-h6字体大小的引导断点

问h1-h6字体大小的引导断点
EN

Stack Overflow用户

提问于 2022-06-26 13:53:36

回答 1查看 141关注 0票数 2

我只是想知道是否有任何方法可以使用(sm、md、lg、xl..etc)的断点来处理引导程序提供的字体大小：

<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>

html

css

bootstrap-5

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-26 19:12:49

你知道怎么用SASS吗？不久前我也遇到了同样的问题，我就这样解决了。那么，您必须更改引导程序第5版的断点，但这很容易。

我是这样做的：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72762169

复制

相似问题

问h1-h6字体大小的引导断点
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问h1-h6字体大小的引导断点EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问h1-h6字体大小的引导断点
EN