HTML/CSS: Making width consistent across multiple resolutions

Question

I have some squares s of size 15px rendered on a page. Their absolute size varies based on the screen resolution - so on very large resolutions, these end up looking much smaller than I want them to be.

How do I define the width in CSS to make sure they are more or less proportionate across all the different resolutions?

Answer 1

You can use percentages.

  width:20%

this way the width is a percentage of the screen size regardless of resolution.

Answer 2

Read about CSS Units. You need to use relative unit, such as: em or ex. Percentage is always a good way to go, but sometimes it’s hard to 'bind it' to the font size.