问题标签 [viewport-units]

我有一个网站，它依赖于“幻灯片”容器中的视口大小，但在垂直调整窗口高度后不会重新计算。水平和混合滚动强制以vh正确的顺序重新计算。vw在水平调整大小时正确重新计算。

我可以修复它还是让 js 强制执行重新计算重新计算大小的重新渲染？

铬 30，mac 操作系统 x 10.9。

我正在处理带有水平滚动条的页面布局。我有一些水平顺序固定宽度的面板，它们都应该具有视口高度。我决定测试这个vh单元来做到这一点。

这工作正常，直到我得到一个滚动条。问题是，它vh忽略了滚动条使用的高度，因此添加了一个垂直滚动条。

我想从测量值中减去滚动条的高度vh；有什么办法吗？

我在玩 codepen 时遇到了这种奇怪的现象。

我将各种字体大小设置为 vw 值，但它产生了一些奇怪的行为：

只有当我的元素处于悬停状态时，字体大小才会正确显示，如果不是，则会呈现为 0px。

这是我的 SCSS ：

和

这些元素在我的 html 中没有设置类，除了是 div 的子元素，其样式如下：

这是笔页面的链接： http: //codepen.io/rlacorne/pen/tgrbn

有谁知道发生了什么？这让我很烦。

提前致谢！

如果我将 div 设置为

元素 id 的底部离开屏幕相当多（页面只有大约 40px 高....）

为了让它适合页面，我必须将其设置为

此外，这仅适用于纵向模式，如果我将 ipad 转为横向，即使我刷新屏幕，它似乎仍然认为视口是纵向的！

将 vh 设置为 85 可在 android 平板电脑、windows 平板电脑和桌面浏览器上运行（android 和 windows 平板电脑也会在旋转设备时调整视口的大小）。为什么 ipad 的行为如此奇怪？

我试图在我的应用程序中嵌入一个WebBrowser控件并打开一个带有样式的页面font-size: 3vh; 似乎webbrowser无法识别标签并且字体变得非常大（但是在WP中的IE中查看时这是正常的）请问WP webbrowser是否不支持vh?

另外，当我们想为一个div设置背景图片时，“封面”样式似乎无法覆盖背景并且内容“溢出”

我正在测试 vw 单元（相对于视口宽度）。我的问题是，有没有一种简单的方法可以用像素转换 vw 值？它不必是响应式的。我在想Jquery。prefixfree 插件和 vminpoly 似乎对我不起作用（在本地测试）

从我在其他 答案中看到的情况来看，CSS 视口单元还不能在calc()语句中使用。我想要实现的是以下声明：

即使在声明中不能使用视口单元，是否有一些解决方法可以使用纯 CSScalc()来实现？还是只是 CSS 和 HTML？我知道我可以使用 javascript 动态地做到这一点，但我更喜欢 CSS。

是否有严格的 css 解决方法来使用chromevh的函数？calc()

我需要一个浏览器calc(100vh - 25px)用于顶部margin在页面底部粘贴一个 25 像素的栏，但 chrome 给我带来了问题。

我正在使用 100vh 将 div 与行高垂直居中。该站点对 vh 和 vw 的支持率约为 70%，这是一个公平的评估吗？您是否建议在构建站点时使用视口单位？我知道这有点主观，我只是在寻找比我更有经验的 Web 开发人员的意见。

编辑：感谢大家的投入，我确实希望它在移动设备上看起来不错，所以我想我将不得不放弃 vh。

是否可以以 vh 为单位在 Bootstrap 模态中设置图像的最大高度，并调整模态宽度以适应图像宽度？