Exercise: Responsive Page

Instructions

Any website you design will have to be responsive, since many if not most users look at web content in transit (on mobile devices.) Responsive websites “respond” to the user’s behavior and environment based on screen size, platform and orientation. It consists of a mix of flexible grids and layouts, images and CSS media queries.

This workshop looks specifically at media queries. It’s not useful to target specific devices since new devices come out all the time. Instead, media queries can be used to target numerical breakpoints (browser widths) to the best of their advantage. We will use max-width values, but there is also min-width, and ranges using min and max browser widths together.

Example Site

Step 1: Style this article how you like.
Step 2: Adapt the text to the following 5 media queries:
- @media screen and (max-width: 1024px)
- @media screen and (max-width: 768px)
- @media screen and (max-width: 600px)
- @media screen and (max-width: 480px)
- @media screen and (max-width: 320px) *to view this width: use mobile mode in the Developer Tools
Step 2a: Choose 5 properties to change on the body, h1, h2, and p tags, for each media query. For example:
- padding on body
- font-size of h1, h2, and p
- line-height of p
- font-family of h1
- color of h1, h2, and p

Resources

References