问题标签 [viewport-units]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 检测视口单元（使用modernizr或普通js）并提供适当的样式表
我实际上有一个问题，我试图从 3 周开始解决。我试图测试对 vw 单元的支持并在浏览器不支持该单元时提供单独的样式表.
所以基本上：
场景 1：浏览器支持 vw 单元然后提供样式表 A。
场景 2：浏览器不支持它然后提供样式表 B。
我确实发现有一个名为 Modernizr.cssvwunit 的非核心检测，但老实说，我不知道从哪里开始或如何在这种情况下使用。
如果你能帮助我扩展我的知识，那就太好了。此外，如果不是太费力的话，一个带有我可以学习的例子的 jsfiddle 会非常有帮助。
真挚地，
马库斯
编辑：为什么它只触发 else 语句？ http://jsfiddle.net/5saCL/10
html - 使用“vw”作为大小度量时，当容器停止缩小时，字体大小会继续缩小。为什么？
我在一个容器中有 2 个文本框，其中有文本，其font-size属性已使用“vw”指标指定，其中大小与父容器大小成正比。当您缩小和放大容器时，字体大小会减小。但是，我min-width为文本框和容器指定了 a ，但字体大小继续减小，即使在父母停止缩小之后也是如此。有谁知道为什么会这样？
HTML：
CSS：
html - 在css中将带有动画和vh单位的div居中？
所以我有一个 div，假设width: 7vh; height: 7vh; background: black;它在另一个 div 中，background: orange; height: 7vh; width: 100%;. 我有一个动画，应该取消它的中心。目前我left: 50%在内部 div 上使用，但显然这接近居中，但不是真的。margin: 0 auto;或者margin-left: auto; margin-right: auto;不动画。那我该怎么办？用 JS 计算距离是我唯一的解决方案吗？
JsFiddle http://jsfiddle.net/8e7dk/
这个例子没有居中，它只是接近这样做，通过使用left: 50%;
css - CSS 让图片占据一定比例的视口
我正在开发一个标题下方有幻灯片的网站。我想响应地限制幻灯片的高度，这样如果它在一个屏幕分辨率上留下 20-30% 的视口，它会在另一个屏幕上做同样的事情。目前我的 CSS 看起来像这样。
图像响应缩放，我正在使用视口单元来完成我想要的。但是，视口单元不是非常兼容跨浏览器的，所以我正在寻找一种方法来在所有浏览器中实现相同的想法。我宁愿只使用 CSS 而不是 JavaScript 或 jQuery。
css - Safari 对带有视口单元的 calc() 的支持？
根据http://caniuse.com/viewport-units当前版本的 Safari 应该完全支持 Viewport unity。然而，当我使用下面的代码时：
Safari 不理解它并默认为top: 0（iOS Safari 上的相同）。在这个特定的例子中，我猜我可以使用百分比，但在其他情况下，我不得不为 Safari 添加一些 jQuery，这让我觉得很难看。
尽管 caniuse.com 告诉我它完全支持视口单元，为什么 Safari 不理解上述 PC 和 iPhone 的内容？在某些情况下，javascript 是唯一的选择吗？
html - vw 和 vh 单位如何工作？
我想知道如何计算 和 的vh值vw。我正在设计一个网站，2vw它可以完美地用于我的文本。然而，我只是猜到了。请告诉我这些单位是如何工作的，以便我将来可以使用它们。我也想知道他们是否支持跨浏览器。
css - PhantomJS 忽略 vw 中的字体大小
我想用 PhantomJS 渲染一个页面，字体大小应该是 VW，因为我想以不同的大小显示相同的页面。
不幸的是，无论我尝试什么，Phantomjs 都会忽略这些单位的字体大小。
ViewportSize 是在 JS 中设置的，也可以在带有元标记的 HTML 中设置。
PhantomJS 版本 1.9.7；win，linux，结果一样。
html - 为什么字体大小 vw 在 Safari 中不起作用？
我使用 vw 作为字体大小的单位，以便在调整浏览器大小时看起来不错。但是，当我在 Safari 上浏览它时，内容运行，有谁知道如何解决它？谢谢
CSS
html - 使用 vh 在 div 内垂直居中
我目前正在尝试将图像置于 div 中，该 div 的尺寸设置为 vh。我尝试使用使display:table-cell;图像居中但开始与其他元素的 vw 混淆的方法。我想知道是否有另一种更简单的方法可以将此图像垂直居中在一个 div 中，即 vh.h 。我知道这可能有点令人困惑，所以希望我下面的代码可以提供帮助！
html:
CSS：
html - vw 对比其父元素更宽的元素的后备
我有一个子元素，position: absolute;它应该与包装器具有相同的宽度，但也有一个定位的祖先。由于祖先的宽度取决于内容，我无法“反向计算”始终与包装器匹配甚至停留在视口内的宽度。使用宽度vw和包装器max-width我得到了我想要的外观，但它在 IE8 或大多数 Android 版本中不起作用。
JS 解决方案很简单，但在应用之前会导致可见的跳转，如果根本不应用，布局会有些损坏。
所以我想知道：是否有一种非 js 方法可以强制动态宽度大于父元素但最多与视口一样宽？