移动端不用rem实现宽高等比例自适应

由于大搜的限制，我们的页面不方便使用rem，那么如何实现像这种“左图又文”或“左文右图”的样式呢？

难点1：图片高度随着宽度的大小而自适应
难点2: 文字区域需要和图片区域等高

针对于难点1:
我们可以用宽度百分比和padding-bottom的百分比代替高度来解决这个问题，这样我们就有了这样的一个宽高等比例的容器。
tips：padding的百分比是参考当前父容器内文字排列方向有关的，即文字横向排列则以父容器宽度为基准，竖向排列则以父容器的高度做基准。
难点2:
我们同样用padding-bottom,而高度一定要设置0，我们完全用padding来代替高度，这样就实现了右侧左右图文布局

转载于:https://juejin.im/post/5a042aa06fb9a0452a3bc58e