Scale a web layout using a viewport

Question

I know the CSS 3 units vw , vh and vm , which are apparently useful for creating elements whose size and size are equal to the size of the browser viewport. However, unfortunately, they are not supported by modern browsers; Internet Explorer 9+ only.

What other methods can I use to create properties such as CSS font-size that scale in the viewport? I would like to avoid possible JavaScript and / or jQuery options if possible.

Answer 1

You can create a 100% scalable website. As Roar said, you can do this using percentages, but it's tricky.

The best option is to use @media queries . This allows CSS rules to be applied to the page only under certain conditions. Using media queries to determine the width of the device and / or page width, you can apply subtle control over how your site looks at different sizes of viewports. For example:

 @media screen and (max-device-width: 960px) { font-size:14px; } @media screen and (max-device-width: 480px) { font-size:13px; } 

Now the above example is pretty trivial and far-fetched. For a deeper understanding of what you can accomplish with media queries, I recommend that you look at the W3C specification . Some of the most powerful are the requests width , min-device-width , max-device-width , portrait|landscape and print .

As a side note, be sure to include these styles at the bottom of your CSS so that they are not overwritten by default.