在CSS中可以同时使用vw和vh吗？

我正在使用CodePen为体育联盟的支架工作。下面是代码有问题的行：在CSS中可以同时使用vw和vh吗？

#body div[class^="side-"] ol li p.game a { 
    color: #000000; 
    font: bold .7vw/1 tungsten, sans-serif; 
    height: auto; 
    width: auto; 
    padding: 0; 
    box-shadow: 0; 
}

当我调整窗口的大小宽度方向它看起来不错，但调整高度时，文本不会调整其整个支架产生溢出。我已经尝试使用vmin，但没有帮助，因为窗口的高度几乎总是小于宽度。是否可以同时使用vw和vh规格，以便窗口调整为调整宽度和高度？

非常感谢您的帮助和耐心。

来源

2017-08-04 It' s Blobby Time

要回答标题中的问题：是的。 – Vivick

这个奇怪的'.7vw/1'是什么？ – Vivick

相关的答案：https：//stackoverflow.com/questions/16617248/calc-of-max-or-max-of-calc-in-css。所以vmin会很有帮助，但前提是你的vw和vh的大小比例为1：1。 – Hans

是的，这取决于你的使用情况的具体细节。 CSS允许aspect-ratio媒体查询。这可以允许您针对各种纵横比具有一个vmin或vw/vh大小。基于你的一个粗略的例子：

html { 
    color: #000000; 
    font: bold 7vw tungsten, sans-serif; 
    height: auto; 
    width: auto; 
    padding: 0; 
    box-shadow: 0; 
    font-size: 20vmin; 
} 

@media (min-aspect-ratio: 3/1) { 
    html { 
    color: #00a; 
    font-size: 14vmin; 
    } 
}

这应该让你解决你对宽高比担忧：“我一直在使用VMIN尝试，但并不能帮助作为窗口的高度几乎总是小于宽度”。

根据你的设计，采用vw当屏幕宽vh当屏幕是高可能会比使用上面显示的vmin更好。

来源

2017-08-04 22:28:25 Hans

也许，你可以看到属性word-wrap：break-word？

否则，你可以看到：

@media all and (orientation: landscape) { /* HERE YOUR CODE */ }

来源

2017-08-04 22:13:37 Jonathan

在CSS中可以同时使用vw和vh吗？

回答

相关问题