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 exercise 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.

Step 1: Please make a new repository in Github. You will make your website in this repository.
Step 2: Style this article how you like.
Step 3: 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 4: 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