我们更建议采用另外一种方法，请参见：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？
