扩展HTML元素的最佳方法

Question

我正在寻找一些关于缩放某些HTML元素以供在大屏幕（如自助服务终端）上使用的选项。我目前正在使用CSS3 scale（）来获得相对跨浏览器的规模（感谢cssplease），但看看是否有其他人有更好的建议。

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

SVG可以做什么，还是画布？ CSS3 scale（）是可以的，但图像需要用高分辨率版本替换。文字间距似乎也略有偏差。

谢谢！

Answer 1

CSS3 Transforms仍然是我想要的最佳选择，特别是对于浏览器性能。

Answer 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/

我发现它们非常有用，一旦你进入它就可以轻松构建可扩展的网站;））

Answer 3

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