通常,在做界面的时候,尤其是移动端页面,难免会碰到自适应的问题。
宽度的自适应比较简单,用百分比就好,但是高度呢,就像堆麻烦些,比较常见的方法是:

  1. 借助js来计算高度。
  2. 在需要等比自适应宽高的标签中放一个img标签,通过图片的特性将元素根据图片的宽高撑开。

最近,发现了一个更便捷的方法,不用借助上面两种方式,纯css就可实现,元素的宽高等比自适应,目前移动端是完美支持的。

亲测,在移动端下是没问题的,这个padding-top的百分比是根据元素本身的宽度来算的。

如果使用中大家碰到什么问题,欢迎随时在文章下方留言互动

欢迎留言