如何让我的页脚在所有设备上直接响应（没有任何文字突破底线）？

Question

我想知道是否有更好的方法可以使此页脚在所有设备上以直线响应（没有任何文字打破线条），而不必经常使用媒体查询

我正在使用站点检查器来帮助我定义响应能力，但它表明每隔几个像素我就应该再次重置侧面填充，

这是正确的还是有更好的方法可以使其直接并响应所有设备？

感谢您的帮助！

.footerTp {
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-wrap: wrap;
  padding: 2rem 32%;
}

.footer-textTp p {
  font-size: 1rem;
}

@media (max-width: 1335px) {
  .footerTp {
    padding: 2rem 34%;
  }
  .footer-textTp p {
    font-size: 14px;
  }
}

@media (max-width: 1315px) {
  .footerTp {
    padding: 2rem 33%;
  }
}

@media (max-width: 1240px) {
  .footerTp {
    padding: 2rem 32%;
  }
}

@media (max-width: 1170px) {
  .footerTp {
    padding: 2rem 31%;
  }
}

@media (max-width: 1110px) {
  .footerTp {
    padding: 2rem 30%;
  }
}

@media (max-width: 1055px) {
  .footerTp {
    padding: 2rem 28%;
  }
}

@media (max-width: 960px) {
  .footerTp {
    padding: 2rem 27%;
  }
}

@media (max-width: 920px) {
  .footerTp {
    padding: 2rem 26%;
  }
}

@media (max-width: 882px) {
  .footerTp {
    padding: 2rem 25%;
  }
}

@media (max-width: 847px) {
  .footerTp {
    padding: 2rem 24%;
  }
}

@media (max-width: 815px) {
  .footerTp {
    padding: 2rem 23%;
  }
}

@media (max-width: 786px) {
  .footerTp {
    padding: 2rem 22%;
  }
}

@media (max-width: 758px) {
  .footerTp {
    padding: 2rem 21%;
  }
}

@media (max-width: 732px) {
  .footerTp {
    padding: 2rem 20%;
  }
}

@media (max-width: 709px) {
  .footerTp {
    padding: 2rem 19%;
  }
}

@media (max-width: 687px) {
  .footerTp {
    padding: 2rem 18%;
  }
}

@media (max-width: 667px) {
  .footerTp {
    padding: 2rem 17%;
  }
}

@media (max-width: 647px) {
  .footerTp {
    padding: 2rem 16%;
  }
}

@media (max-width: 627px) {
  .footerTp {
    padding: 2rem 15%;
  }
}

@media (max-width: 609px) {
  .footerTp {
    padding: 2rem 14%;
  }
}

@media (max-width: 595px) {
  .footerTp {
    padding: 2rem 13%;
  }
}

<footer class="footerTp">
  <div class="footer-textTp">
    <p>
      Copyright &copy; 2023 by Palace of Triumph | All Rights Reserved
    </p>
  </div>
</footer>

Answer 1

如果您知道希望元素对所有尺寸都响应，那么最简单的方法是从最小尺寸构建，然后在屏幕较大时设置媒体查询。通过媒体查询，找出尺寸之间的断点。在什么宽度尺寸下，元素应该改变？

在您的示例代码中，您有很多断点，实际上有 21 个。它们都是必要的吗？你能减少这个吗？

更好的方法是让框架为您完成工作。这样，您就不需要定义自己的断点，而只需要担心内容。

这并不意味着框架总能解决您的所有问题，但大多数时候，它使很多事情变得更容易。

Bootstrap 是一个流行的框架，如果你只想要 CSS 的东西。