问题标签 [viewport-units]

所以我刚刚发现了视口单位，我真的很想使用它们。

第一个挑战：我的元素的“基本尺寸”为 760x670 像素。我想使用视口单位将其放大，以便高度为100vh或宽度为100vw，以较小者为准。

不幸的是，虽然我可以使用100vmin两者中较小的一个，但我只能将其应用于宽度或高度，而不是两者。

目前我正在使用：

这会缩放宽度以适应屏幕，从而实现垂直滚动。这还不错，但如果我真的可以让它适合视口，我会更喜欢它。

新的vw（和vh，vmin和vmax）CSS 单元非常有用，就像calc. 两者在 Chrome 中都可以正常工作（后者前缀为-webkit-calc），但由于某种原因，我发现calc包括v*单位在内的属性值，例如width: -webkit-calc(95vw - 25em)产生无效的属性值。这只是尚未实现，还是规范或错误？

我正在为智能手机创建下面的布局。iPhone、Android 和黑莓是主要目标。无论是纵向还是横向，布局都将保持不变。对于横向，它将缩放到宽度。无论屏幕方向如何，我想要做的是定位和调整文本的大小。灰色框代表图像。我想知道在这种情况下，任何特定的 css 单位、vw、em 或 % 有什么优势吗？

使用新的vmincss 属性来获得正确的字体大小。工作绝对很棒！

调整页面大小时会出现问题。例如，如果页面变小，font-size则 保持不变，从而使所有内容变得不平衡。

首先，浏览器应该处理这个吗？

第二，最好的处理方法是什么？似乎如果我使用触发器来设置font-size，那么我需要知道 以及 中的字体大小值javascript，css从而造成必然会失败的情况。

在必须广泛使用的情况下，使用vha 的高度div和vm字体大小。

css3

html - 案例 1

html - 案例 2

有什么方法可以使用和calc()其他css3属性来垂直居中？div.innerdiv.outer

我正在编写响应式设计，并且使用 vw 字体大小效果很好。问题是 webkit 还不支持 vmax，所以问题变成了：

当客户端屏幕处于窄纵向模式（例如 iphone 5 纵向）时，有没有办法将字体渲染大小从使用 vw 动态切换到使用 vh？

我试图通过设置视口最小宽度来“作弊”，但这似乎不起作用。屏幕的实际宽度似乎总是取代。

当我 <\meta name="viewport" content="width=device-width"/> 输入我网站的代码时，在将设备从横向旋转到纵向或反之亦然之后，1 vw（视口宽度）不会更新。例如，如果我的手机屏幕是 640x360 并且我以纵向模式打开我的网站，那么 1vw = 1/360px 但是当我旋转它时它仍然是，但应该是 1/640px。在 Firefox for Android 中，一切似乎都是正确的。有没有办法让它在没有javascript的情况下工作？

我有一个元素的最大高度为 65vh。我需要在我的 JavaScript 中将其转换为像素，以查看图像是否适合那里，或者我是否需要缩小/裁剪它。（我在做win8 App开发）。

这行得通吗？

100 vh =screen.height因此以像素为单位的 65vh 是screen.height *0.65

演示

有时我会使用与此方法类似的方法创建一个正方形（或任何矩形，实际上），它会在任何大小下尊重其比率。

我想要的是：

• 以防止正方形在高度较小的设备（即横向手机）上延伸到视口之外

建议的解决方案

• 使用将正方形的宽度限制为视口高度的百分比max-width: 90vh
• 期望比率得到尊重

CSS

HTML

应该发生什么

• 在高度较小的视口中，正方形的最大宽度应为视口高度的 90%

实际发生的情况：

• 当视口高度小于正方形宽度时：
  • 宽度受vh值限制
  • 高度是根据正方形的宽度计算的，如果它没有被限制在vh
  • 我们得到一个垂直长的矩形

规范说相对值是根据“包含块”计算的，在我看来，它应该是容器的当前宽度。

浏览器行为：

• Chrome 29.0.1547.65：如所述
• Firefox 23.01：如所述
• Opera：根本不尊重 vh未经 Opera 16+ 验证

我是否错误地解释了规范，或者这可能是浏览器供应商实施中的错误？

我想要一个始终为浏览器高度的 100% 的站点，当高度改变时，宽度会随着纵横比缩放。

我可以使用新的 vh 单元来实现这一点：http: //jsbin.com/AmAZaDA/3（调整浏览器高度）

但是，我担心 IE8 和 Safari 的回退，因为那里不支持该单元。

是否有任何其他纯 CSS方法可以实现此效果？