Question

我正计划在视口单元（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
};

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

您是否知道另一种简单的解决方案，以获得合理的浏览器兼容性？

Answer 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属性。

Answer 2

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

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

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

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;}
}

CSS视口单元当前支持

2 个答案: