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{

...

}

}`

CodePudding user response：

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.

CodePudding user response：

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.