如何在浏览器窗口调整大小时保持宽高比

Question

我有一个使用HTML/CSS构建的页面，专门用于在电视上显示。我已经开发了该页面，使其完美适应1920x1080的比例，但是我希望有一种方法可以按照与原始设计完全相同的纵横比例来缩放页面。是否有任何Javascript脚本可用于帮助保持恒定的比例？

编辑：最终将将其转换为RoR应用程序，将不断更新新闻/事件等内容。

- Spentacular

Answer 1

您可以使用CSS @media查询来实现此功能。

@media screen and (min-width: 1920px) {
   /*Styles goes here*/
}

或者您可以使用 media = projection。

- Mr. Alien

---

但我希望它也能在此基础上进行扩展。您是否建议创建多个断点并为每个调整尺寸？ - Spentacular

是的，您可以针对特定的分辨率使用特定的媒体查询，这将是一种清晰的方法。 - Mr. Alien

我甚至从未读过关于媒体=投影的任何内容。你有相关来源吗？听起来非常方便！ - Spentacular

@Spentacular 你可以在谷歌上搜索，我找到了一个链接，http://www.codestyle.org/css/media/projection-BrowserSummary.shtml，或者更好的是 http://www.w3.org/TR/CSS21/media.html。 - Mr. Alien

我只是不知道你是否有其他来源。谢谢你发送它们！ - Spentacular

Answer 2

一个简单的窗口大小改变监听器就可以解决这个问题：

$(window).on('resize',funciton(){
  var self=$('#ur_id');
  self.height( self.width() * (1080/1920))
})

- Rene Koch

---

你需要使用百分比而不是像素来完成它...但你真的应该考虑用SVG重新设计它。 - Rene Koch

内容会变化，但保持所有内容为图像将会失去意义，对吧？ - Spentacular

SVG不是一张图片，它更像HTML。你可以在其中使用JS，没有问题。我们在工作中用它来制作呼叫中心的信息屏幕。 - Rene Koch

只要您已经了解HTML/CSS，几个小时内就可以自学SVG :) - Rene Koch

我应该将所有字体转换为SVG字体吗？还是只转换整个页面？ - Spentacular

Answer 3

一个支持1920x1080分辨率的设备设计通常不适用于移动设备。也许您需要隐藏一些元素（通常是侧边栏）或减小字体大小，加载不同的标志...因此，最好的解决方案是使用响应式网页设计，如@Mr. Alien所建议的那样，使用@media查询。

响应式网页设计是一种网页设计方法，旨在为宽广的设备范围（从台式电脑显示器到手机）提供最佳浏览体验——易读和导航，最小化缩放、平移和滚动。

您可以在SmashingMagazine上查看一些指南和教程。

- Tomas Ramirez Sarduy

---

我尝试将设计实现为响应式的，但最大的问题是字体无法正确调整大小（感谢Sass和百分比函数）。 - Spentacular

通过相对值（例如em或％），字体大小，行高和边距间距可以被继承;) - Tomas Ramirez Sarduy