Question

我知道SVG支持这一点。但我想知道HTML / CSS是否可以按比例缩放，就像适合各种显示器的图像一样？例如，想想一个基于HTML5 phonegap的移动应用程序，它可以在iPhone（3,4s，5等），Android等许多不同大小的屏幕上“工作”，并且有大量的屏幕尺寸。

我不是在谈论使用百分比宽度，如div中的100％或20％，字体的em或一堆媒体查询。我想在我的div上使用绝对宽度/高度，因为它更容易编程。

例如，假设我创建一个400px宽度和600px高度的应用程序，该div中的所有内容（按钮，更多div，图像等）也使用像素高度和宽度以及定位。

现在，有没有办法将这个东西“缩放”到我想要的任何分辨率？

就像围绕它一样

<scaleToDevice>
<div style='width:400px;height:600px'>
    ... All my other UI here, like buttons, etc would use absolute positioning with pixels
</div>
</scaleToDevice>

它只是工作“想想你如何在Photoshop中缩放图像。除了这只是在HTML / CSS上，扩展到设备的100％宽度和高度，应用程序将保持交互。

Answer 1

您希望使用CSS视口宽度/高度（vw / vh）属性。

http://snook.ca/archives/html_and_css/vm-vh-units

通过这种方式，您可以将所有宽度/高度/大小（在CSS中）与这些vw，vh属性相关联，并且通过正确的数学计算，整个站点可以通过调整窗口大小来放大和缩小。

Answer 2

可能，您需要使用CSS transform属性。但是，请记住，您需要做一些数学操作，因为您需要牢记方向以及屏幕的宽高比。但是，如果你想这样做，你可以做到。以下是我给另一个用户的一些代码，您可以将其作为起点：

#body {
    width:100vw;
    height:100vh;
    text-align:center;
}
#content {
    transform: translateY(-50%);
    -webkit-transform:translateY(-50%);
    top:50%;
    transform: scale(2);
    transform-origin: 0%;
}

这也将使元素的比例从中心增长（例如，如果您正在旋转视图，这将在移动设备上看起来更好。您还可以添加转换以获得更平滑的效果）。所以继续吧，试试吧。但是有一个原因是为什么没有其他人不这样做：努力不值得最终结果，你最终总是需要微调

扩展HTML / CSS以适应各种监视器，是否可能？

2 个答案: