问题标签 [viewport-units]

在 CSS3 中，有这 2 个新单位：vh和vw. 所以我们可以使用

缩放 80% 视口高度或 60% 视口宽度的块。

但我认为通常情况下，默认body元素8px在所有 4 个边都有一个边距，所以我们应该如何将它纳入我们对 的使用vw，以及vh如果我们确实需要使用100vhand 100vw（或几乎那个量来掩盖宽度和高度，但工作与身体的边缘）？一些选项包括（1）将正文边距重置为0，（2）将正文边距重置为8px（以确保它在所有浏览器中都相同（3）使用height: calc(100vh - 8px)并width: calc(100vw - 16px)设置正确的高度和宽度......但8pxand16px似乎也是硬编码。有什么好的做法来处理这个问题？

我正在创建一个 HTML 电子邮件模板。桌面版本是用表格完成的，很少有内联 css，所有大小都以 % 或 px 值定义。

对于移动版本，我使用 div 和 css。现在我想根据视口宽度调整一些文本的大小。因为如果我将某些标题的字体大小定义为 28px，那么某个文本在更宽的设备上可能看起来不错，但在较小的设备上，文本会变大并中断到下一行。

现在我正在考虑像这样设置基本字体大小：（在整页模式下运行片段，然后调整窗口大小以查看效果）

像这样，随后的字体大小根据视口宽度进行缩放，标题在较小的设备上变得更小，防止文本中断，或者至少降低了它的可能性。通过使用 calc() 我还定义了一个最小值，所以文本不会变得太小。

现在我的问题是是否可以将其用于电子邮件（移动），或者移动电子邮件客户端是否严重支持它？浏览器支持很好，但我找不到任何关于移动电子邮件客户端支持的信息。

不幸100vh的是，它并不总是与100%浏览器高度相同，如下例所示。

这个问题在 iPhone 6+ 上更为明显，上部位置栏和下部导航栏在滚动时如何扩展和收缩，但不包括在100vh.

高度的实际值100%可以通过window.innerHeight在JS中使用来获取。

有没有一种方便的方法来计算100vhJS 中像素的当前转换？

我试图避免需要生成具有内联样式的虚拟元素来计算100vh.

出于这个问题的目的，假设一个敌对的环境，其中max-width或max-height可能产生不正确的值，并且100vh页面上的任何地方都不存在现有元素。基本上，假设任何可能出错的地方都存在，但本机浏览器功能除外，这些功能保证是干净的。

到目前为止，我想出的最好的是：

但是计算 的当前值似乎太冗长了100vh，我不确定它是否还有其他问题。

是否可以仅使用 css 从元素的背景图像计算元素的最小宽度？

在占据整个视口高度的内联 flexbox 包装器中，我们可以使用 javascript 来计算每个子 div 的相对宽度 - 基于背景图像的 (w/h) 比例。

然后使用 css3 视口高度将其应用于元素

因此，如果图像是130px width x 100px height，则应用于 div 的最小宽度是130vh。

可以在没有 javascript 的情况下实现基于背景图像宽度的布局吗？

小提琴演示：https ://jsfiddle.net/ucxyefmL/

在我的网站部分的背景图像上使用全宽和全高，但我在 Android 上遇到了一些跳跃行为。我正在使用modernizr 来检测触摸事件并将背景附件从固定更改为本地。这是网站，下面是我正在使用的 css：

因此，我正在研究流体响应设计，并且网站上的文本大小基于 %。刚刚意识到，如果我尝试打印（cmd+p）网站设计会在 chrome 上中断。看起来像一个非常古老且已知的问题，并且无法在线找到黑客来完成这项工作？你能就此提出一些建议吗？

此处提到的问题：https ://code.google.com/p/chromium/issues/detail?id=382313 这是您可以尝试放在本地 html 页面上并尝试在 chrome 上打印的 html：

如果有一种方法可以在调用打印时传递硬编码的视图大小，那也是一件好事吗？

为什么手动计算的高度和浏览器计算的高度之间存在差异，使用 vh 单位。由于这种计算错误，我在亚像素级别遇到了问题。

如果 100vh 是 535px 那么为什么在除以 100 时最后会有这个“...005”。应该有 5.35 就是这样，在...之后没有奇怪的数字

测试在小提琴中。

https://jsfiddle.net/szpadel444/fdhvkygx/1/

问题：

iOS8/Safari 似乎不理解/不支持包含视口单元的媒体查询，例如：(max-height: 175vw). 不过，它在 iOS9 设备上运行良好。我尝试使用max-aspect-ratio，max-device-aspect-ratio但它们也被忽略了。

有谁知道为什么这不起作用或知道创建与比例/纵横比而不是特定屏幕尺寸无关的媒体查询的任何其他方式？

解释（或者，为什么我什至需要这个？）

我们正在使用 Cordova 开发一个 ios/android 应用程序，不必担心断点和所有不同的屏幕尺寸，我们决定非常广泛地使用视口单位，只担心一些纵横比/屏幕尺寸比例。

所以，现在，我们的样式在 iPhone 5、6、6+ 等设备上运行良好，大多数 Android 设备（以及任何其他共享这些比例或介于两者之间的设备）。

现在，iPhone4 和 iPad 等设备的比例有很大不同；他们说的更“方正”。考虑到这一点，我们只需要一个 7/4 及以下比例的媒体查询，并且(max-height: 175vw)在 iOS9 和 Android 设备上运行良好（我们正在使用适用于 Android 的 Crosswalk，所以也考虑使用 Chrome），但似乎不适用于iOS8/Safari。

更新：

刚刚有了一个想法。现在我将使用(max-height: 175vw)它应该修复所有 Android 设备（我们支持的至少 4.4）和 iOS9 设备。之后，我可能只需要对 iPhone4 和/或 iPad 进行额外的媒体查询。

我有一点复杂的问题。我需要通过单位line-height差异vh和CSS 来设置。我的想法是通过这段代码来设置它pxcalc

这听起来很容易，但行不通。CSS Calc Viewport Units Workaround中描述了为什么使用这些单位进行计算不起作用？这是通过修改边距和填充来解决height属性的，但它不能用于行高属性。

我看到这个问题在 Chrome、IE 和 Edge 中得到了解决，但我也需要在 Firefox 上这样做。在 Firefox 中，它显示在开发人员工具中

无效的属性值。

任何想法？（JavaScript 不是我的解决方案）

我正在尝试将元素高度设置为等于视口宽度。如何做到这一点？（以下面的小提琴为例）...

https://jsfiddle.net/minlare/0hnn7pfy/

仅当存在滚动条时才会发生高度和宽度之间的不匹配。

我需要考虑可能存在滚动条的情况，为我的 div 保持方形格式。