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

Question

我是网页设计的新手，是否可以根据 < bootstrap 4 中的 strong>不同的屏幕尺寸。因为当它出现在小屏幕尺寸时，它太大了。

这是我的 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>