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

Question

我有一个使用HTML / CSS构建的页面，其目的仅用于在电视上显示。我开发的页面完全符合1920x1080的比例，但我想要一种方法来使页面按原始设计的完全相同的纵横比向上或向下缩放。我可以使用任何Javascript脚本来帮助维持恒定的比率吗？

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

Answer 1

您可以使用CSS @media查询

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

或者您可以使用media = projection

Answer 2

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

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

Answer 3

支持1920x1080分辨率的设备的设计大多不适用于移动设备。也许您需要隐藏一些元素（通常是侧边栏）或减少字体大小，加载不同的徽标......所以最好的解决方案是responsive web design使用@media查询作为@Mr。外星人建议。

  

响应式网页设计是一种网页设计方法，其中精心设计网站以提供最佳观看体验 - 轻松阅读和导航，同时最大限度地调整，平移和滚动各种设备（来自台式计算机）显示器到手机）。

您可以在SmashingMagazine查看一些Guidelines and Tutorials。