apicloud apicloud

注册
查看: 3238|回复: 2

[APP开发技巧] 如何优雅的做到宽高等比自适应

主题:
14
帖子:
318
云币:
2318

APICloud粉丝圣诞节

[APP开发技巧] 如何优雅的做到宽高等比自适应

3238 2 | 发表于 2015-7-28 09:26:51 |阅读模式 | |
自适应,始终是手机端web开发中的最重要的一环。毕竟不可能在开发中针对不同的分辨率去一个一个的写 @media screen。

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


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



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

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

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

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


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


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

查看全部评分

新手上路

UID:177449

主题:
2
帖子:
10
云币:
85
发表于 2015-11-18 16:56:19 |
不管页面怎么变 那个九宫格都没变化  就算自适应了 ?

点评

:你四不四撒 
发表于 2015-11-20 13:55
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表