Responsive Layouts

Resizing Windows

In this exercise, you will take the layouts you created in last week’s exercise, and make them respond to the window size.

Technical Notes

• Responsive Layouts

1. You should have an understanding of the following components of responsive design:

• meta tag
• fluid layout
• relative units
• fluid images
• media queries

2. Class Site Organization

If you haven’t done so yet, be sure to organize your class site repository and upload a live link to your exercise layout.
Then, make a new folder for this current exercise, and duplicate your files from last week’s layout exercise into it.

3. Adapt your layouts

For each of your layouts, apply the above principles to create a layout that adapts to various window widths, including mobile (less than 500px wide). You must have at least one @media rule.

Make a link to your mobile layouts from your class site.

Bonus: Add a @media print query that specifies formatting for the printed website. Export this preview as a PDF and link it from your class site.