做了一组移动端的页面,在布局时遇到了一些问题,总结下以避免再次掉坑。
遇到的问题:
1.图片及带背景图片的块宽高等比缩放布局
2.margin,padding百分比布局
图片及带有背景图片的块的图片宽高等比缩放
纯图片可以使用img标签,将其宽度设置成百分比,高度会自动按比例缩放。控制起来很方便。
带背景图片的div就有点麻烦了,宽度可以使用百分比,但高度如果不设置具体像素数,会按照内容大小自动布局,这个问题处理起来有点点小麻烦。
解决方案是使用百分比padding将块支撑起来,但具体的百分比padding如何计算。
margin,padding百分比布局
这个主题其实就一个关键问题:margin,padding的百分比是按照谁的百分比计算的。
规范中注明了margin的百分比值参照其包含块的宽度进行计算。当然,这只发生在writing-mode: horizontal-tb和direction:ltr的情况下。书写模式是纵向的情况下,它会按照块的高度来计算。
padding取值百分比来做:垂直方向的padding取值使用百分比时,其值是相对于本模块的宽度(怪异模式盒子模型)
再回头想想,为什么margin:auto;不能在垂直方向上居中?其实原因也是上