CSS 实际应用-手机中轻松的自动高度

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

电脑上通常设计宽度尺寸固定,那么高度自然就固定了。

但是手机上宽度是变化的,那么高度如何按比例呢?

height:calc(100vw * 3 / 4);

如上:

  • calc 是计算函数。

  • 100vwvw 中单位,代表 Viewport Width,100vw 就是视口的宽度(屏幕宽度)。

  • 后面 * 3 / 4,也就是说高度是宽度的 3/4。注意为了兼容性,操作符两端要打上空格。

进阶

可能有人会说,上面得到的是窗口宽度的 3/4,我想要列表中某图片宽度的 3/4,这怎么办呢?一样的,只是计算更深了,举个例子:

height:calc(((100vw / 2) - 20px) * 3 / 4);

如上,我们一行有 2 列,每列左右有 10px 的 padding,剩下的就是图片的宽度,然后高度是宽度的 3/4。

相关文章