新的vw(和vh,vmin和vmax)CSS单元非常有用calc.两者都在Chrome中工作正常(后者作为前缀-webkit-calc),但由于某种原因,我发现calc属性值包括v*单位,例如width: -webkit-calc(95vw - 25em)产生无效的属性值.这还没有实现,还是规范或错误？
所以我刚刚发现了视口单元,我真的想要使用它们.
第一个挑战:我的元素的"基本大小"为760x670像素.我想使用视口单元对其进行缩放,以便高度为100vh或宽度100vw为较小者.
不幸的是,虽然我可以100vmin用来获得两者中较小的一个,但我只能将它应用于宽度或高度,而不是两者.
目前我正在使用:
#root {
width: 760px;
height: 670px;
width: 100vw;
height: calc(670vw/760);
}
这会缩放宽度以适合屏幕,从而产生垂直滚动.这不是太糟糕,但我更喜欢它,如果我真的能让它适合视口.
我在Safari上遇到了一个非常小众的CSS问题。
我有以下CSS规则：
min-height: calc(100vh - 115.5px - 25px*2);
在Chrome这个作品，但Safari浏览器似乎并不喜欢的组合calc和vh。（例如，如果我用替换vh，它会起作用%-但我确实需要根据vh或适当的替代方法进行计算。）
有什么办法可以解决这个问题？另外，还有另一种引用方式vh是calc-Safari上友好的吗？