1

I have used SOF for along time, but never asked a question. Today I was on Firefox's website and noticed that it talked about px and % like it is out of date. The site suggested using ViewHeight and view width, or view pixels(vh and vi or vpx). What is the difference between using...

width: 100%;

and

width: 100vw;

..??? and why did they make the change?

  • 5
    Does this answer your question? [CSS Units - What is the difference between vh/vw and %?](https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and) –  Jan 01 '20 at 23:57
  • There are different nuances between browsers & viewports. `100%` refers to 100% the width of the parent element. `100vw` refers to 100% viewport width. – admcfajn Jan 02 '20 at 00:58

1 Answers1

2

It is always better to use relative sizing with web elements (such as width / height / font-size etc) - so setting explicit pixels is soooo last century. Setting fontsize with em or even better REM values and setting height / widht with percentages is a better approach.

width: 100%; - will size the width of the element to be 100% of its container

width: 100vw; - will size width of the the element to be 100% of the viewport width

1vw = 1% of the viewport width

100vw = 100% of the viewport width

by the same token -

1vh = 1% of the viewport height 100vh = 100% of the viewport height

Interestingly there is also vmin and vmax - which relate to the smaller and larger sides of the viewport 1vmin = 1% of the viewport smallest side 100vmin = 100% of the viewport smallest side

1vmax = 1% of the viewport largest side 100vmax = 100% of the viewport largest side

vmin and vmax are useful for allowing content to change when you rotate the screen in which the vw and vh won't change but the vmin and vmax will.

gavgrif
  • 15,194
  • 2
  • 25
  • 27