Lec7- Designing for the Mobile Web: Responsive Design

Lec7- Designing for the Mobile Web: Responsive Design

1. Viewport?

   • The viewport is the user's visible area of a web page.

2. Viewport Meta Tag

   • <meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Media Query

4. flexible image

   • If the width property is set to 100%, the image will be responsive and scale up and down:
   • img { max-width: 100%; height: auto; }

5. Responsive Images HTML 5.1 Picture Element

   • <picture> <source media="(min-width: 1200px)" srcset="large.jpg"> </picture>

6. Responsive Images HTML 5.1 sizes & srcset Attributes

   • <img src="fallback.jpg" sizes="100vw" srcset="large.jpg 1200w, medium.jpg 800w, small.jpg 320w" alt="waterwheel">

7. Using Flexbox

Images and files in the map