0

Well, I have been working on some website. It has come to my notice that mostly when people when using media queries they use fixed px values, or they use breaking points.

so I wanted to know if it is bad to use viewpoints (vh/vw) in media queries, as so far they are working most devices. but the website works on all standard/common smartphones.

@media screen and (max-width: 100vw){
  body,html{


  }
}
Ethan
  • 881
  • 8
  • 14
  • 26
Matthews Masia
  • 29
  • 9
  • `@media screen and (max-width: 100vw)` - Your maximum width can be your full width i.e. completely useless media query – Zach Jensz Apr 03 '22 at 12:57
  • Well, true to what you are saying but when I don't use this query mostly the main element doesn't fit the given/user screen. It has a scrollbar for both the x-axis and y-axis which I don't face with this query. – Matthews Masia Apr 03 '22 at 13:10
  • The viewport often includes the area taken up by scrollbars, [See this Stack Overflow Question](https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar) – Zach Jensz Apr 03 '22 at 13:14

2 Answers2

0

max-width, min-width, max-height, and min-height media queries are meant to change styling based on viewport size. No matter the size of the viewport, it’s max-width will always be 100vw and max-height will always be 100vh. So a media query using those units will not make any changes to styling based on viewport size.

clawfair
  • 54
  • 3
  • this media query will be used on every device no matter the point. So let me say I run this on desktop and my designs are for mobile, this query will be used on desktop too right? and it may not be what I want to happen. – Matthews Masia Apr 03 '22 at 14:21
  • Correct, if the query looks for `max-width: 100vw`, it will always be used – clawfair Apr 04 '22 at 15:23
  • doesn't really answer the question. Can't use 100vw which is always true. Must use a specific hard value such as 500px. – G-Man Jun 01 '23 at 20:58
-1

The vw and vh are based on percentage of the view port width and height. They are similar to but not exactly like %. A max-width 100 would be all the viewing area. Your viewing area will always be 100vh by 100vw. Max-width is inclusive. So the query will always be used.

NealM
  • 58
  • 7