Vw and Vh or @media

Question

Hello!

I had a dispute with a friend: what is better vw and vh or @ media requests ?

I argue that vw and vh can and should be introduced into the development of the site because these values help the site adjust to any screen resolutions. That's why I decided to create a mini-site where these values will be everywhere.

div { width: 25vw; height: 25vh; font-size: 5vw; background-color: black; color: white }

 <div> DiV </div>

They scale blocks for all screen resolutions, while maintaining the normal arrangement of blocks (both on large screens and small ones). And @media not convenient because you need to manually specify all the dimensions, which should not be devices. For all the same, you never know from which device the user will enter.

My friend claims that @media better, because The technique is quite resistant, it is used on many sites and devices, and it does an excellent job of adjusting it. And vw и vh useless thing, which in principle is not needed at all. Why are they, if you can adjust using @media ?

So what is better to use vw and vh or @media in adjusting the site for different screens?

Why media if viewport is used or why viewport if media is used?
Here you have changed the width of the browser window, 5 columns (20vw) ceased to fit.
20vw is 20% of the browser window size and blocks shrink or expand.
Media queries are good because they allow you to show different layouts on different layouts.

Vadim Ovchinnikov Vadim Ovchinnikov 8,456 3 26 64 · Accepted Answer · 2017-02-08T10:01:18

These are completely different things, the use of which does not contradict each other. Setting the sizes of anything in vw / vh and @media units - queries have completely different purposes.

Use vw / vh when you need units of measure relative to screen width / height.

Use @media when you need different styles for different resolutions, for different devices, purely styles for printing, etc.

VostokSisters VostokSisters 763 four 20 · Answer 2 · 2017-02-08T09:35:39

Because there can be no talk about any accuracy then. 1vw - 1% of the window width. To make up a 120 pixel block, you need to specify 1.2vw, but keep in your head constantly the essence of what you make up from 100px width. This is an extra hemorrhagic. But it still does not matter)
The trouble will start there when you need to change styles. I will surprise you, but: for mobile phones you need not a normal display of the site (this including, but not only), but also the corresponding design. And without a media query, you can change the design only through crutches, which will work through the stump-deck (at best), and at worst - they will be harder than you @media hate.
And the fact that there will be problems with scaling and that the browser will need to recalculate the width of everything on the page will not be discussed even. The browser displays pixels, not% width. It must be counted and drawn.

When you come to the layout in Photoshop and said to be "do it", then you will not succeed.
Because the width of the layout will be some 2140 pixels, and you will run around with a calculator to recount everything?

When you really need a third of the screen, not 713px from the above layout.
@Anon, I did not say that the viewport values should be abandoned forever.
And apply, as you said, when you need a percentage of the width of the screen.
I wanted to put a plus, but changed my mind when I realized that the answer comes down to "always and everywhere use pixels."
@VostokSisters, I get a dialogue without them, and without js.

Vw and Vh or @media

2 answers 2

More articles: