电脑上通常设计宽度尺寸固定,那么高度自然就固定了。
但是手机上宽度是变化的,那么高度如何按比例呢?
height:calc(100vw * 3 / 4);
如上:
- calc 是计算函数。
- 100vw 中 vw 中单位,代表 Viewport Width,100vw 就是视口的宽度(屏幕宽度)。
- 后面 * 3 / 4,也就是说高度是宽度的 3/4。注意为了兼容性,操作符两端要打上空格。
进阶
可能有人会说,上面得到的是窗口宽度的 3/4,我想要列表中某图片宽度的 3/4,这怎么办呢?一样的,只是计算更深了,举个例子:
height:calc(((100vw / 2) - 20px) * 3 / 4);
如上,我们一行有 2 列,每列左右有 10px 的 padding,剩下的就是图片的宽度,然后高度是宽度的 3/4。