如何优雅的做到宽高等比自适应

slimcheng

自适应，始终是手机端web开发中的最重要的一环。毕竟不可能在开发中针对不同的分辨率去一个一个的写 @media screen。

当然用js来计算高度。。也是一种方法，但是有纯css实现的方法，为什么还要用js呢


今天在这里讲一下经常能碰到的一种自适应的情况，也就是宽高等比自适应。
如果知道这种方法，或者已经玩的很6了。。。请轻拍。
最常见的场景也就是类似九宫格的布局,如何在任何分辨率下保持每个方块的宽高比例。



利用padding-top或padding-bottom来达到以上目的。

如果给 这两个值 设置成 百分比的话 ，是以什么为基准的？
元素本身的 高度？父级元素的高度？

其实他是根据外层元素的宽度为基准的。
也就是说，padding-top:50% 的话，高度不设置或者设置为 0，这个时候这个元素的高度（height+padding）就是外层元素宽的 一半。

具体详情，可以看我写的一个小demo，理解起来就更直观了


源码及预览：
http://runjs.cn/detail/tsraxwz8


当然，还有一种方法，就是通过在元素内部放一个想要的比例的透明图片，通过图片的特性将元素撑开。。。也同样能达到以上目的。。。但是 毕竟 碰到 一个页面中 出现几处 比例不一样的地方的话，还要准备不止一张图，毕竟图片太多，对页面渲染也不好

姚啊姚

不管页面怎么变 那个九宫格都没变化  就算自适应了 ？