2

I was wandering if in 2016 is the correct time and place to use css3 vw & vh units for creating responsive sites, from my experience this is the easiest way to make it happen... but i have not seen almost nowhere using this technic. Why is that so? And if you have better way doing responsive sites pleas share...

George Chanturia
  • 169
  • 2
  • 12

1 Answers1

2

VH and VW are relative to the height / width of the viewport, so they are ideal for scaling elements based on the viewport size.

For example if you want a 2 column layout, specifying the width of each column as being 50vw will work well. According to Can I Use browser support is good if you don't need to use vmax.

Scaling is one aspect of responsive design, another is changing the page layout.
As correctly noted by George Chanturia below, the following comments refer to adaptive design, not responsive design.

Say you wanted your 2 column layout to collapse to a single column on smartphones you'll probably want to use media queries and pixels or rems or ems

eg

@media only screen and (max-width: 25em) { 
...
}

or

@media only screen and (max-width: 400px) {
...
}

For sure you could use VM and VW inside those media queries but it's not a feature you can test for in the actual media query.

Hope this helps.

Community
  • 1
  • 1
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Thanks for sharing your idea, everything you said above is correct and i agree except of that the responsive design aspect is of changing the page layout, this is clearly the aspect of adaptive design :-) – George Chanturia Jul 07 '16 at 13:49
  • thank you for pointing this out @GeorgeChanturia, you are 100% correct, I should have been accurate in my terminology ;) – David Taiaroa Jul 07 '16 at 18:31