缩放 HTML 元素的最佳方法答案

【问题标题】：Best method to scale HTML elements缩放 HTML 元素的最佳方法
【发布时间】：2012-10-12 06:56:24
【问题描述】：

我正在寻找一些关于缩放某些 HTML 元素以在大屏幕（如信息亭）上使用的选项。我目前正在使用 CSS3 scale() 来获得相对跨浏览器的比例（感谢 cssplease），但看看是否有其他人有更好的建议。

我主要关注的是大规模渲染小部件（HTML、js 和图像）（例如，从 400x200px 到 800x500）。虽然我可以为更大的规模重写每个小部件，但我想我会检查我的选项。

SVG 或画布有什么可以做的吗？ CSS3 scale() 没问题，但是图片需要替换成高分辨率版本。文本间距似乎也略有偏差。

谢谢！

【问题讨论】：

标签： html css svg widget scale

【解决方案1】：

CSS3 转换仍然是我想要的最佳选择，尤其是浏览器性能。

【讨论】：

【解决方案2】：

不确定您的理解是否正确，但如果您需要您的网站、图片、视频等在任何屏幕（任何分辨率）上看起来都不错，您可以尝试进行响应式设计。您可以选择使用 css 媒体查询来调整网站以适应不同的屏幕分辨率，它还将保持原始图像质量等。

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

我发现它们非常有帮助，一旦你开始使用它，你就可以轻松构建可扩展的网站 ;))

【讨论】：

虽然在正确的轨道上（媒体查询是个好主意），但它比使用响应式设计更复杂一些。我实际上需要将一些小东西缩放 200%，以便它在 1080p LED 屏幕上可见。响应式设计只允许您调整页面元素的布局，而不是大小。很好的资源，谢谢！

【解决方案3】：

这可能是一个广泛的改造，但您可以使用 em 定义元素的尺寸，然后使用媒体查询来增加不同屏幕尺寸的基本字体大小。因此，如果您的基本字体大小为 16 像素，则您的主列可能是 47 em，侧边栏 12 em，大约为 1000 像素的网站宽度。然后，您可以使用媒体查询来检测更大的浏览器，您只需将基本字体大小增加到 20 像素，您的网站现在扩大了 25%。

【讨论】：

我认为这将解决我遇到的字体间距问题，方法是切换到 em 或百分比（使用像素）。