javascript - 如何通过调整浏览器窗口大小来保持纵横比

Question

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

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

您可以为此使用 CSS @media 查询

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

或者你可以使用media = projection

score 0 · Accepted Answer

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

响应式网页设计是一种网页设计方法，其中网站经过精心设计，可在各种设备（从台式计算机显示器到移动设备）上提供最佳查看体验——轻松阅读和导航，只需最少的调整大小、平移和滚动电话）。

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

3 回答 3