如何使用浏览器窗口调整大小来保持宽高比

我有一个使用HTML/CSS构建的页面，其目的仅仅是用于在电视上显示。我开发的页面完全符合1920x1080的比例，但我想要一种方式使页面按照原始设计的完全相同的高宽比向上或向下放大或缩小。有没有我可以用来帮助维持恒定比率的JavaScript脚本？如何使用浏览器窗口调整大小来保持宽高比

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

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

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

2012-10-26 19:56:49

这将保持容器的纵横比，但不是它内部的元素，但？ – Spentacular

你需要做到这一切在％不是px ...但你应该真的考虑在svg中重做它。 –

内容将会发生变化，所以只保留所有内容，但是图片会破坏目的？ – Spentacular

您可以使用CSS @media查询此

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

或者你可以使用media = projection

2012-10-26 19:51:14

但我希望它能在这个比例下进行缩放。你会建议创建多个断点并为每个断点调整尺寸吗？ – Spentacular

是的，你可以使用特定的媒体查询特定的决议，这将是干净的方法 –

我甚至从来没有读过任何关于媒体=投影。你有它的来源吗？这听起来很方便！ – Spentacular

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

自适应网页设计是网页设计的方法，其中的位点是制作以提供最佳的观看体验，便于阅读和导航用最少的调整大小，平移和滚动-跨越广泛范围的装置中的（从台式电脑显示器到手机）。

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

2012-10-26 20:47:31

我已经尝试将设计实现为响应式设计，但最大的问题是字体没有正确调整大小（谢谢sass和百分比功能）。 – Spentacular

使用相对值（例如em或％），可以继承字体大小，行高和页边空白距离;） –

回答