HTML and CSS Reference
In-Depth Information
If you want to apply your custom styles to any media type, you can use the
keyword
all
, or just omit the media type. The following are equivalent:
@media all and (max-width: 800px)
@media (max-width: 800px)
Yo u c a n u s e t h e
not
keyword to indicate that you want to apply your styles in
any case other than the one evaluated as true by the media query. For example:
@media not screen and (max-width: 800px) {
/* put your styles here */
}
Yo u c a n c h a i n f u r t h e r c of n d i t i of n s of n t of t h e e n d s of f y of u r m e d i a q u e r i e s t of e n f of r c e
stricter conditions, for example:
@media screen and (max-width: 800px) and (orientation: landscape) {
/* put your styles here */
}
If you want to apply the same set of conditional styles when multiple conditions
are true, you can put the different sets of conditions on the same line, separated
by commas, like so:
@media screen and (max-width: 800px), print and (max-width: 29.7cm)
{
/* put your styles here */
}
The most common media features you'll want to test are as follows:
min
/
max-width
and
min
/
max-height
.
Apply styles depending on the width
or height of your browser window's viewport: the part of the window that
the web page is actually displayed in.
min
/
max-device-width
and
min
/
max-device-height
.
Apply styles depend-
ing on the physical width or height of the device rather than the viewport.
The importance of this distinction will become apparent later in the chapter.
