Display nicely across desktop screen sizes

StackOverflow https://stackoverflow.com/questions/23383789

Question

I have designed a website on my retina monitor, set at the highest resolution. On this resolution the site looks really great :p. However, when I view the site on a smaller 13" monitor, all the elements and the font are way too big and in your face.

I have done some research, and found two ways to try and show the website in a nice way across different desktop screen sizes:

  1. Use a media query to Scale/Transform the body. However, this "feels" wrong and I can imagine this has some performance impact. Furthermore I can imagine this gives inconsistencies across screen sizes

  2. Use ems across the board. I am not really sure what'd be the right starting point for this, but I have read that some people base everything upon their font-size. However, I would not really know how this'd work for images.

Can someone please tell me what'd the best way to make the website display nicely across desktop screen size.

p.s. The website is based on twitter bootstrap

Was it helpful?

Solution

I would suggest the second option. The way it would work is by setting the element font size in px, and using relative sizes for the containers and divs inside them. For example

<body>
 <div id="container">
  <article>This is some text</article>
 </div>
</body>

CSS:

html{
 font-size: 32px;
}
#container{
 font-size: 1.5 rem;
}
article{
 font-size: 1.2 em;
}

CSS-tricks has a nice article on this - http://css-tricks.com/rems-ems/

As for image resizing, that can be done dynamically in JS based on window.width()

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top