最近在做一个小项目，前端部分需要适配手机端。由于工期比较急，先上线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 ;
}总结：
backgorund图片不能撑开容器
尽量用img标签，这样可以撑开容器
padding和margin中如果取百分比的值，这个百分比都是根据宽度而言的。可以用padding-bottom: 百分比，来根据图片宽高比撑开容器
作者：小土者
链接：https://www.jianshu.com/p/7da339fb69e6
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦