【CSS】margin和padding使用百分比

2024年2月5日 259次阅读 来源: 小土者

最近在做一个小项目，前端部分需要适配手机端。由于工期比较急，先上线PC端，所以在开发PC端样式的时候，没有考虑太多手机端的适配问题。

PC端上线后开始做手机端的适配工作，其实主要就是用media query做响应式的处理。由于这个项目还是那种非常老式的服务端渲染的前后端混在一起的开发模式，在我开发完PC端页面后，后端就拿着我的页面去对接后台了。所以我再要做手机端适配，就希望不要再去改html结构了，最好只修改css即可。

遇到的一个比较蛋疼的问题是，有一些PC端上会有一些图片作为background，这些容器的宽高自然也是用px写死的固定值。到了手机端，宽度可以100%，但高度就不能用百分比了。

有没有一种可以在css中通过宽度和宽高比算出高度的方法呢？

答案是有的，那就是padding和margin的百分比。

原理是：padding和margin中如果取百分比的值，这个百分比都是根据宽度而言的。

如果宽度是100%，并且你知道你的background用的图片的尺寸，那你就可以通过padding-bottom把容器撑开成背景图正好宽度100%高度自动时撑开的尺寸。

.container{
  background: url("../img/classGabeBgAll.png") top center no-repeat;   /* 尺寸为879*716 */
  width: 100%;
  background-size:100% auto;
  padding-bottom: 82%;         /* 716 / 879 * 100%  */
  height: auto ;
}

总结：

  1. backgorund图片不能撑开容器
  2. 尽量用img标签，这样可以撑开容器
  3. padding和margin中如果取百分比的值，这个百分比都是根据宽度而言的。可以用padding-bottom: 百分比，来根据图片宽高比撑开容器
    原文作者：小土者
    原文地址: https://www.jianshu.com/p/7da339fb69e6
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞