Blog

Using vW units in LESS for a quick responsive on desktop.

Among px, em and %, CSS supports units such as “vw”, “vh”, “vmin” and “vmax”. These are called viewport units, and are effectively a percentage of the viewport.

  • “vw” is relative to the viewport’s width.
  • “vh” is relative to the viewport’s height.
  • “vmin” is relative to the smallest of the two. (“vm” on old IE versions.)
  • “vmax” is relative to the biggest of the two.

This allows developers to create incredibly responsive applications, without the need to use a huge amount of breakpoints. However, mobile devices have still to completely catch up with this, and so they’re only really useful for resolutions above 768px. Regardless, these units allow us to quickly and reliably responsivise a page for any desktop resolution.

Using viewport units makes it possible to keep the aspect ratio between some, or all elements in the screen, constant, which means the page will look the same or very similar on a tablet or on a desktop computer. The main limitation being the font size, as it can become too small to be readable as the viewport width scales down.

Furthermore, if using Less (or Sass), it is possible to do this in only a few keystrokes! Since Less/Sass support math operations, it is very easy to tell it to use the viewport width equivalent of a certain px value at a certain screen size.

width:50px; // at 1440px width this is equivalent to:
width:(50vw/1440*100);

The resulting value will conserve the size/ratio at 1440px width, and then scale down smoothly from there.

It is important to take into account that using vw outside the parenthesis will, at least on Less, add a space in between the number and the unit, thus breaking the property definition.

I wrote this how to guide, it probably repeats some of the things I’ve mentioned already:

VW Example! Here’s what it looks like.

Here’s a quick howto:


Step 1

Do everything as usual for a big/max resolution:

.example-2{
  margin-top: 50px;
  height: 100px;
  background-color: fade( darken( spin(red, -60), 20), 40%);
  border-radius: 50px;
  .dots{
    margin-top: 25px;
    .dot{
      float: left;
      display: block;
      width: 50px;
      height: 50px;
      background-color: black;
      border-radius: 50%;
      margin: 0 20px;
    }
  }
}
            

Step 2

Copy everything inside a media query, delete lines that do not contain px’s:

@media ( max-width: 1440px ) {
  .example-2{
    margin-top: 50px;
    height: 100px;
    border-radius: 50px;
    .dots{
      margin-top: 25px;
      .dot{
        width: 50px;
        height: 50px;
        margin: 0 20px;
      }
    }
  }
}
            

Step 3, MAGIC!

Here’s where the deep magic begins!

As mentioned before vw is a percentage of the viewport’s width. What we want to achieve is to retain the same aspect ratio in each of this elements as there is on a 1440px wide resolution.

Ergo, we figure out what percentage each value is ( e.g. 100px / 1440 * 100 ) and use a vw unit with that, and bingo!

However! Since we are using less (and you should use less if you aren’t using it!), we can let it take care of everything on its own! Like this:

@media ( max-width: 1440px ) {
  .example-2{
    margin-top: (50vw/1440*100);
    height: (100vw/1440*100);
    border-radius: (50vw/1440*100);
    .dots{
      margin-top: (25vw/1440*100);
      .dot{
        width: (50vw/1440*100);
        height: (50vw/1440*100);
        margin: 0 (20vw/1440*100);
      }
    }
  }
}
            

It’s important to note that if you put the unit “vw” outside of the parenthesis less will add a space in between it and the result of the operation. The browsers will then not recognize vw as a unit, and the line will get ignored.


Using Sublime, you can multiple select all “px”, then word-select to the left after deleting the px, add parenthesis, and type the math function on all instances of px at once!

In order to add another instance to your selection you can use Cmd+D on Mac or Ctrl+D on Windows.


And, last of all, here’s a js fiddle with the magic! (Full screen result.)

Leave a Comment