0

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

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

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

4

2 回答 2

0

对于视口相对字体大小，试试这个插件： 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房产。

于 2016-11-14T07:56:29.567 回答
-1

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

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

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

如何正确使用 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;}
}
于 2015-05-12T02:18:44.920 回答