Using CSS REM units to create scalable website designs that look great across multiple screen sizes.

So the designer has finally finished the wonderful homepage design and its time for you to start coding it to turn it into a website.

Creating the website to match the specs and properties of the design is not a problem. Especially when using Figma or Sketch as you can get the exact CSS properties you require to build a pixel perfect match of the supplied design.

But what about the other screen sizes? Where is the design for those? Chances are there is no design for those and its up to you, The mighty developer to take care of the missing parts.

Implement this REMS based, scaling technique to ensure your website stays in proportion to the design supplied. See code and video below for further explanation.

//media queries
$tablet_small: 768px;
$tablet_large: 1024px;
$desktop_small: 1280px;
$desktop_medium: 1440px;
$desktop_large: 1600px; 
$desktop_xlarge: 1920px; 


html {
    font-size: 48%;
    @media screen and (min-width:$tablet_small) {
      /*
      scale everything down a bit for a 1024px wide 
      smaller desktop monitor 
      */
      font-size: 53%;
    }
    @media screen and (min-width:$desktop_small) {
      /*
      scale everything down a bit for a 1280px wide 
      smaller desktop monitor 
      */
      font-size: 55%;
    }

    @media screen and (min-width: $desktop_medium) {
      /*
      scale everything down a bit for a 1400px wide 
      smaller desktop monitor 
      */
      font-size: 58%;
    }

    @media screen and (min-width:$desktop_large) {
      /*
      scale everything down a bit for a 1600px wide 
      smaller desktop monitor 
      */
      font-size: 60%;
    }

    @media screen and (min-width:$desktop_xlarge) {

      /*
      62.5% makes the font size of 1rem = 10px:
      this makes it easy to set font size in px
      for instance:
      3rem = 30px
      4.5rem = 45px
      */
      font-size: 62.5%; 
    }
}