手机版网页高度根据宽度自适应问题

作者:vkvi 来源:千一网络(原创) 日期:2021-4-16

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

相关文章