|
自适应,始终是手机端web开发中的最重要的一环。毕竟不可能在开发中针对不同的分辨率去一个一个的写 @media screen。
当然用js来计算高度。。也是一种方法,但是有纯css实现的方法,为什么还要用js呢
今天在这里讲一下经常能碰到的一种自适应的情况,也就是宽高等比自适应。
如果知道这种方法,或者已经玩的很6了。。。请轻拍。
最常见的场景也就是类似九宫格的布局,如何在任何分辨率下保持每个方块的宽高比例。
利用padding-top或padding-bottom来达到以上目的。
如果给 这两个值 设置成 百分比的话 ,是以什么为基准的?
元素本身的 高度?父级元素的高度?
其实他是根据外层元素的宽度为基准的。
也就是说,padding-top:50% 的话,高度不设置或者设置为 0,这个时候这个元素的高度(height+padding)就是外层元素宽的 一半。
具体详情,可以看我写的一个小demo,理解起来就更直观了
源码及预览:
http://runjs.cn/detail/tsraxwz8
当然,还有一种方法,就是通过在元素内部放一个想要的比例的透明图片,通过图片的特性将元素撑开。。。也同样能达到以上目的。。。但是 毕竟 碰到 一个页面中 出现几处 比例不一样的地方的话,还要准备不止一张图,毕竟图片太多,对页面渲染也不好
|
评分
-
1
查看全部评分
-
|