0
点赞
收藏
分享

微信扫一扫

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

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

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

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。

举报

相关推荐

0 条评论