当前支持的 CSS 视口单元答案

【问题标题】：CSS viewport units current support当前支持的 CSS 视口单元
【发布时间】：2014-08-08 17:32:18
【问题描述】：

我正计划在视口单元（vh、vw）上使用一些具有高度和字体大小的 div 构建一个单页滚动站点。

我知道旧版浏览器存在一些支持问题，但我对使用 vminpoly 增加页面负载不感兴趣，因为我发现它很笨重，而且我对非常过时的浏览器支持并不着迷。

另一方面，Buggyfill 可能是跨浏览器兼容性的较小但部分解决方案。

另一种解决方案可能是测试css-tricks 上所写的支持，然后使用 jQuery 调整受影响元素的大小：

var testEl = $("#vw-test");

testEl.css({
  width: "100vw"
});

if (testEl.width() == window.innerWidth) {
   // do nothing
} else {
   // resize divs with jQuery
};

您支持视口单元的方法是什么？

您知道另一种合理的浏览器兼容性的简单解决方案吗？

【问题讨论】：

Buggyfill 不会使这些单元在旧版浏览器上运行，它只是修复了 Safari Mobile 的现有实现这些单元的问题。如果你说你对支持过时的浏览器“并不疯狂”，那么current support 就足够宽泛了。（除了 Blink 之前的 Opera。）

标签： jquery html css viewport-units

【解决方案1】：

对于视口相对字体大小，试试这个插件： https://github.com/draashurx/viewportfontsize/tree/master

简单明了的用法示例：

$('p').vw(10); // Equals font-size: 10vw
$('p').vh(5);  // Equals font-size: 5vh

但是，此插件不支持width 或height 属性。目前仅适用于font-size属性。

【讨论】：

【解决方案2】：

这似乎是一个基于意见的问题，也不清楚你在问什么。

就font-size 中的使用而言，我认为实际使用视口单元的最佳和唯一方法是将它们隐藏在最小高度和长度的媒体查询后面，以em 表示，以确保您不会t 从这些视口单元获得负放大率。

就网络可访问性而言，视口单元最有用和最合适的使用可能是在简单的一页信用卡式名片联系信息页面上。（否则，如果您将它用于长文本文章等，那么您可能会破坏那些专门拥有更大显示器以同时查看更多文本的人的体验。）

How to properly use css-values viewport-relative-lengths?

/* automatically magnify business-card-style page in large viewports */
/* please don't use this unless you yourself posses a large monitor! */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 200% magnification when at 100em */
  html {font-size: 2vmin;}
}

【讨论】：