我们更建议采用另外一种方法,请参见:CSS 实际应用-手机中轻松的自动高度。
电脑版网页,通常宽度是固定的,所以高度也是可以使用像素进行固定制作。
但是手机版不能固定宽度为像素,所以手机版的宽度通常是 100%。
有些效果中,要保持宽高比,比如,要保证这块区域是 16:9,以方便放视频,或者放背景图片一类的,怎么办呢?
使用 padding-bottom
为 padding-bottom 赋百分比的值,这是一个神奇的应用。
<ul> <li style="margin:0; padding:0; padding-bottom:20%; list-style:none;"></li> </ul>
如上,li 此时的高度是上层元素 ul 宽度的 20%。
可以用 padding-top 吗?可以,实际上 padding 的 4 个值为百分比时,都是按上层元素宽度作为基数来乘的。
继续
现在高度是有了,但是里面没法装内容了,全让 padding 给占了。
其实也简单:
为 li 写 position:relative;
li 里面的内容写上 position:absolute; top:x%; left:x%;
x% 为根据设计,确定为实际的数值。
题外
如果我们测试时发现手机网页 100% 并不是手机浏览器宽度,而是 980px,那么我们要考虑下,我们是不是漏写了 viewport?