在支持的浏览器上的媒体查询中具有视口单位的calc()

时间:2018-07-25 15:30:43

标签: css google-chrome sass media-queries

在Chrome(版本68)的媒体查询中使用calc()似乎将视口单位替换为px。例如

@media only screen and (min-height: calc(100vw + 10px))

产生

@media only screen and (min-height: 110px)

Firefox能够正确处理它,并且在媒体查询中(根据mozilla,不支持calc()的IE,Edge和Safari)似乎忽略了对我的用例更好的查询。

如何在适当支持的浏览器中应用媒体查询+ calc()?我是否应该期望Firefox继续以这种方式支持calc()

用例:在正方形的画布上填充视口的游戏中,根据可用空间,签名应出现在画布(默认值)或视口的右下角。

演示:https://codepen.io/LoveF/pen/PBjXwr

0 个答案:

没有答案