0

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

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

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

谢谢！

4

3 回答 3

1

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

于 2012-10-11T22:56:24.153 回答
0

不确定您的理解是否正确，但如果您需要您的网站、图像、视频等在任何屏幕（任何分辨率）上看起来都不错，您可以尝试进行响应式设计。您可以选择使用 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/

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

于 2012-04-16T15:47:16.593 回答
0

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

于 2012-04-16T16:17:21.177 回答