CSS media query for exact viewport width
Yes, in CSS it is possible to use @media
rules to target an exact width.
CSS Example
@media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px
wide, apply the following CSS. When your viewport width
changes to 981px
or 979px
or anything that isn't 980px
wide, the CSS will be removed.
Unlike the other answers, this is not using max-width
or min-width
because the @media
rules allow you to just define width
, which will target the exact measurement you give it. The width
is defined using the viewport width.
Note: You can learn more about the CSS3
@media
rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, includingwidth
all the way at the bottom.
You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
@media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}