In previous exercises, we chained multiple media features of the same type in one media query by using the and
operator. It allowed us to create a range by using min-width
and max-width
in the same media query.
The and
operator can be used to require multiple media features. Therefore, we can use the and
operator to require both a max-width
of 480px
and to have a min-resolution
of 300dpi
.
For example:
@media only screen and (max-width: 480px) and (min-resolution: 300dpi) { /* CSS ruleset */ }
By placing the and
operator between the two media features, the browser will require both media features to be true before it renders the CSS within the media query. The and
operator can be used to chain as many media features as necessary.
Instructions
The website’s text needs to be larger for users who have small, low resolution screens.
Write a media query that applies when the max-resolution
is 150dpi
and the screen has a max-width
of 480px
.
Inside the media query, make the font-size
of the .page-description
element 20px
.