Responsive Fundamentals: HTML, Images, CSS

Question 1

What attributes can an image tag have for responsive images, and how does it handle a fallback or default image?

Answer 1

srcset and sizes; fallback is src. srcset=”a list of images and their sizes” sizes=”optional rules”

Question 2

what is syntax for srcset attribute?

Answer 2

srcset = “small.jpg 300vw, medium.jpg 640vw, large.jpg 1200w” // numbers are the natural image width in pixels but should be w.

Question 3

What does this mean? sizes=”(max-width: 640px) 100vw, 25vw”

Answer 3

If viewport is under 640px, display image at 100%; otherwise display at 25%.

Question 4

What’s the syntax for a media query for screen, a minimum width, and seen in landscape mode?

Answer 4

@media screen and (min-width: 720px) and (orientation: landscape) { …

Question 5

What meta attribute should you use to ensure appropriate zooming for responsive websites?

Answer 5

meta name=”viewport” content=”width=device-width, initial-scale=1”

Question 6

what is syntax for sizes attribute?

Answer 6

sizes = “(min/max width: n pixels) width of image relative to viewport width, default width if rules don’t apply”