April 2018
Beginner
368 pages
7h 37m
English
Responsive design can be accomplished using media queries. How does this work? Think of media queries as a condition that you apply to your CSS. You tell the browser to add or remove certain CSS rules depending on the device or viewport size:

To apply those rules, we will need to use the CSS property @media, as follows:
/* Mobile Styles */@media only screen and (max-width: 400px) { body { background-color: #F09A9D; /* Red */ }}
@media only screen and (max-width: 400px) means that if the screen/viewport size is fewer than or equal to 400px, then we apply this CSS.
There are a few different types of properties you ...