我知道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%宽度和高度,应用程序将保持交互。

最佳答案

有可能,您需要使用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%;
}

这也将使元素的比例从中心开始增大(例如,在移动设备上,如果旋转视图,这会看起来更好)。也可以添加过渡以获得更平滑的效果)。所以去吧,试试看。但是没有人不这么做是有原因的:付出的努力不值得得到最终的结果,你最终总是需要一个微调

10-05 21:03
查看更多