Javascript 如何在调整浏览器窗口大小时保持纵横比

我有一个使用HTML/CSS构建的页面，该页面仅用于在电视上显示。我开发的页面完全符合1920x1080的比例，但我希望有一种方法可以使页面放大或缩小，与原始设计的纵横比完全相同。有没有Javascript脚本可以帮助我保持恒定的比率

---

编辑：这将最终变成一个RoR应用程序，它将不断更新新闻/事件等内容。

您可以使用CSS@media查询进行编辑

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

---

或者您可以使用

media=projection

一个简单的监听窗口大小调整可以解决问题：

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

---

例如，支持1920x1080分辨率的设备的设计通常不适用于移动设备。也许你需要隐藏一些元素（通常是侧边栏）或减小字体大小，加载不同的徽标。。。因此，最好的解决方案是使用@Mr.Alien建议的

@媒体

查询

响应式web设计是一种web设计方法，其中网站经过精心设计，以提供最佳的浏览体验—轻松阅读和导航，同时在各种设备（从台式计算机显示器到移动电话）上进行最小的缩放、平移和滚动

---

您可以在SmashingMagazine上查看一些。

但我希望它也能在这个范围内扩展。你会建议只创建多个断点并调整每个断点的尺寸吗？是的，你可以使用特定的媒体查询来获得特定的分辨率，这将是一个干净的方法。我从来没有读过关于媒体=投影的任何内容。你有消息来源吗？听起来很方便@你可以在谷歌上搜索，在这里我找到了1个，或者更好，我只是不知道你是否有其他来源。谢谢你送他们！这将保持容器的纵横比，但不用于容器内的元素？u将需要在%而不是px中完成所有操作。。。但是你真的应该考虑在SVG中重做它。内容会改变，所以只是把所有的东西都当成一个图像来打败它的目的吗？SVG不是一个很像HTML的图像。你可以在里面使用JS，没问题。我们在呼叫中心的InfoScreen中使用它，只要你已经知道html/CSS，你可以在几个小时内自学SVG：）我已经尝试将设计实现为响应性设计，但最大的问题是字体大小没有正确调整（感谢sass和百分比函数）。使用相对值（例如em或%），字体大小、行高和边距可以继承；）