问题标签 [viewport-units]

我正在尝试使用 Flexbox 来实现粘性页脚（页脚位于页面底部，即使内容很少）。

我在网上找到了一个很好的例子：

HTML：

CSS：

小提琴

注意：由于无前缀声明，不适用于所有浏览器，也许在 Chrome 中尝试

虽然这可行，但我不喜欢使用该vh单元，因为该单元的支持甚至不如 Flexbox。所以我尝试使用百分比而不是vh：

小提琴

（为了简短起见，我只发布了更改的代码，但 Fiddle 中有一个完整的示例。）

现在解决方案不再起作用，因为body' 的父html元素 - 元素 - 没有声明高度，因此min-height没有参考。所以我试图设置

但这也无济于事。可能是因为那样，html元素也没有参考。作为结论，我必须这样做才能让它再次工作：

小提琴

height: 100%虽然这似乎可行，但我不确定在html元素上使用的副作用。我记得几年前，我曾经在没有匹配溢出声明的情况下使用类似的东西使一个网站无法使用。

这个解决方案有什么缺点吗？是否有使用百分比的更强大的解决方案？

据我了解，1vw 是视口宽度的 1/100，因此给定视口中有 100vw。但是，当我有两个宽度为 25vw 的 div 时，一个位于距右边缘 25vw 的位置，一个位于距左边缘 25vw 的位置时，它们重叠很多。这适用于多个浏览器，为什么会这样？

我试图确保在设置 width=device-width 时正确理解 Meta 视口标签的工作方式。

如果在使用像素单位的移动设备上工作时
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">被（或应该）视为在 320 像素宽的网格上给出它们，这是否是正确的说法？即宽度：160px 的元素会占据屏幕的（160/320 = 50%）？

在桌面浏览器上运行时，此行为似乎不起作用，因此假设我想在移动设备和桌面设备上获得相同的设计，我应该/可以使用百分比还是vw/vh单位？

我正在做这样的事情：http ://codepen.io/axlpl/pen/vEOyqL 但是当您调整浏览器的大小时，有时右站点在左下方而不是一行，任何人都可以帮我解决这个问题吗？在 Sass 函数 vw 中获取 procent 的函数，第一个 arg "$size" 它的项目大小，这里我得到 1200px，第二个 arg 它的 "$target" 它的元素大小在项目大小 1200px 的示例中，我们得到了 400px 大小的元素包装器；

HTML

SASS

JS

我正在尝试使用 Modernizr 来检测浏览器是否支持视口单元。

这是我的测试：

我知道 iOS7 不支持视口单元，所以这是我需要后备的地方。

当我在 iPad 上横向加载 iOS7 中的页面时，会执行警报。

但是，如果我以纵向加载页面，我看不到警报。

为什么这种情况只适用于景观？这是 Modernizr 的已知错误吗？

所以我遇到了一个问题，浏览器与 vh、vw 单位兼容并与 calc() 兼容，但与 calc 中的 vh、vw 单位不兼容。所以我不确定如何使用modernizr 来测试那个特定的案例。

对此有什么想法吗？非常感谢！

基本上我正在设计一个 jquery 插件来创建使用vw来摆脱字体大小的圆形演示文稿。一切正常，除了 IE9，它使字体的大小比其他浏览器大。你可以看看这里的例子：

http://www.rubenrizzi.com/circularslideshow/example-cell-encrypted/

看起来在 IE9 上看起来比在其他浏览器中看起来更大。

有没有办法通过 polyfill 或 css 技巧来处理这种行为以使 IE9 尊重vw大小？

我正在尝试将一个 div 定位在另一个 div 中，其中父级的高度是使用 vh 单位定义的。

基本上，我需要做的是拥有child height = parent height - 50px. 父级 max-height 应该是屏幕高度的 80%。子高度应该有一个滚动条来显示长内容。

我尝试了几种不同的方法，但似乎没有任何效果。

这是我尝试过的：

http://jsfiddle.net/qLhhk46n/

你有什么主意吗？谢谢

目标：无需滚动即可流畅地适应任何屏幕尺寸和方向的网站。在 SassMeister 中，我用每个媒体查询的不同布局解决了荒谬的数学问题打包部分：

http://sassmeister.com/gist/8f9954aa8973b97f43c8

我能做到的唯一方法是使用基于 vh 和 vw 的 calc 来调整所有 div 的大小。计算和视口单位对于 safari 5、Opera mini、IE8 来说都是一个问题。

如果无法访问 vh、vw、calc，任何 polyfill 都将无法完全适应屏幕而无需滚动。

所以......我是新手，不要扔西红柿，但是否有可能（而不是疯狂）使用 javascript 来：

1）在加载和调整大小时检索 vh 和 vw 值（我知道这部分可以通过视口、边缘等来完成）

2）用相同的javascript内部替换所有css calc函数

3) 将生成的 div 大小输出到样式表

非常感谢您的帮助，但我意识到这意味着 javascript 负责整个布局，这是不受欢迎的。我只是不知道该怎么做。如果有一个坚实的实际原因，这个概念注定要失败，或者其他方法，我也想知道这一点。

谢谢你。

又是一次奇怪的 iOS 错误。我有一个设置为 70vh 左右的标头，并且（在大多数情况下）它运行良好。它曾经在 iOS Safari 中存在问题，但他们似乎已经修复了它。除了当你旋转屏幕。每次旋转视口时，它似乎都会加倍。70vh 变成 140vh，然后是 210vh，依此类推。

我不知道是否可以在 CSS 或元视口标签上更改任何内容来阻止这种情况？如果这是解决它的唯一方法，我什至会考虑使用 Javascript 解决方案。

这是我引用的网站。如果这是你的事，所有的代码都在github上。