VW / VH vs % vs PX ?

Question

Which one of these is best for a responsive website (or maybe for a WebApp like facebook)..
With VW does it mean i dont need @media to resize for different smartphone width again?
Thanks.

Answer 1

I assume you already understand what these are.

1. Media query is still needed when you want to position the containers in different way,
Example:

https://code.sololearn.com/W02pmd87hzEz/?ref=app

(rotate mobile to see)

2. You need to use all of them, for different elements.
vw vh is usually for the container of the sections.
% for the container of the elements
px for font size of body in media query
em for font size in each element.

Example:
https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 2

Yes that is because I want to to demo font size can be based on screen size too in that tutorial.

And later I added some maximum to font size by using px at CSS line 112 to line 122

Answer 3

Gordon After going through your tutorial, i finally understood page responsive..
Thanks..

Answer 4

Lawz You are welcome ^^

I am going to code a second responsive design tutorial using display: grid and display: flex.

I will share with you when I finish.

Answer 5

Gordon
But i can use vw for font size to, its responsive to different mobile..