Is there a way to use calc
with vh
unit in media query for width?
I'm running following code in Chrome 71 (support of calc
in media-queries was added in 66), but see following result: calc
with px
works (red), vh
without calc
works (blue), but they together don't (green).
In firefox everything is fine.
@media all and (min-width: calc(20px - 17px)) {
body {
background: red;
}
}
@media all and (max-width: 100vh) {
body {
background: blue;
}
}
@media all and (max-width: calc(100vh - 17px)) {
body {
background: green;
}
}
PS: Condition means "width without 17px (for vertical scrollbar) is less then height".