如何在Bootstrap 4中实现不同屏幕尺寸的Card-Title行为

Question

我是网页设计的新手，是否可以根据不同的屏幕尺寸更改卡片标题的font-size和卡片图片尺寸 在bootstrap中4.因为当它出现小屏幕尺寸时它太大了。

这是我的HTML代码

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top-a mx-auto d-block mt-5" src="img/a.png"> 
    <h5 class="card-title text-center mt-5 font-weight-bold">Pixel perfect design</h5>
    <p class="card-text px-auto text-justify">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10"> 
  <img class="card-img-top mx-auto d-block mt-5" src="img/b.png">  
  <h5 class="card-title text-center mt-5 font-weight-bold">Design Tageted</h5>
  <p class="card-text px-auto text-justify">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10"> 
  <img class="card-img-top mx-auto d-block mt-5" src="img/c.png">  
  <h5 class="card-title text-center mt-5 font-weight-bold">Finalize a FSL</h5>
  <p class="card-text px-auto text-justify">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>

以下是我管理p{}的CSS代码示例。

那么我是否必须为card-title执行相同的操作，或者是否有其他方法可以执行此操作？

@media (min-width: 0px) { p{font-size: 0.7rem;}}
@media (min-width: 576px) { p{font-size: 0.6rem;}}
@media (min-width: 768px) { p {font-size: 0.8rem;}}
@media (min-width: 992px) { p {font-size: 0.8rem;}}
@media (min-width: 1200px) { p {font-size: 1rem;}}

我应该为不同屏幕尺寸的图像做些什么？

.card-img-top{
  width: 80px;
  height:80px;
}

感谢您的建议！

Answer 1

试试这段代码。但是你必须调整文本和标题的大小，但这确实适用于你

.card-img-top {
  width: 80px;
  height: 80px;
}

@media (min-width: 0px) {
  .responsive-text {
    font-size: 0.7rem;
  }
  
  .responsive-title {
    font-size: 20px;
  }
}

@media (min-width: 576px) {
  .responsive-text {
    font-size: 0.6rem;
  }
  
  .responsive-title {
    font-size: 0.7em;
  }
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 0.8rem;
  }

  .responsive-title {
    font-size: 0.7em;
  }
}

@media (min-width: 992px) {
 .responsive-text {
    font-size: 0.8rem;
  }

  .responsive-title {
    font-size: 0.7em;
  }
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 1rem;
  }

  .responsive-title {
    font-size: 0.7em;
  }
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top-a mx-auto d-block mt-5" src="img/a.png">
  <p class="card-title text-center mt-5 font-weight-bold responsive-title">Pixel perfect design</p>
  <p class="card-text px-auto text-justify responsive-text">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top mx-auto d-block mt-5" src="img/b.png">
  <p class="card-title text-center mt-5 font-weight-bold responsive-title">Design Tageted</p>
  <p class="card-text px-auto text-justify responsive-text">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-10">
  <img class="card-img-top mx-auto d-block mt-5" src="img/c.png">
  <p class="card-title text-center mt-5 font-weight-bold responsive-title">Finalize a FSL</p>
  <p class="card-text px-auto text-justify responsive-text">Some quick example text to build on the card title and make up the bulk of the card's At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius</p>
</div>

Answer 2

同样rem相对于文档的根元素，即html ...并且默认情况下浏览器

html {
  font-size: 16px;
}

因此，使用此概念尝试仅更改html字体值而不是所有元素字体...

html {
  font: 16px Verdana
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

@media (max-width:400px) {
  html {
    font-size: 12px;
  }
}

<h1>foo</h1>
<h2>bar</h2>

{{3}} 进行编辑