How to keep aspect ratio with resizing browser window

Question

I have a page built using HTML / CSS that is intended to be used only for the purpose of displaying on a TV screen. I designed this page to fit perfectly with the 1920x1080 ratio, but I would like the page to scale up or down with the same aspect ratio of the original design. Is there any Javascript script that I could use to maintain a constant relationship?

Edit: this will eventually be converted to a RoR application that will constantly update content such as news / events, etc.

Answer 1

just listening when resizing a window will solve the problem:

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

Answer 2

You can use CSS @media queries to do this

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

Or you can use media = projection

Answer 3

The design of a device that supports a resolution of 1920x1080 is basically not applicable to a mobile device, for example. Perhaps you need to hide some elements (usually the sidebar) or reduce the font size, load a different logo ... Therefore, the best solution is responsive web design using @media queries like @Mr. The foreigner offers.

Responsive web design is an approach to web design in which a website is created for optimal viewing - easy reading and navigation with a minimum size, panning and scrolling - on a wide range of devices (monitors for mobile phones from a desktop computer).

You can check out some Guides and tutorials at SmashingMagazine.