Responsive Web Degisn

Question 1

What is a media query?

Answer 1

A technique that changes the presentation of content based on different viewport sizes

Question 2

What is a viewport?

Answer 2

The user’s visible area of a webpage, it is different depending on the device used to access the site

Question 3

How do you use a media query?

Answer 3

@media (max-width: (number)px) { /* CSS Rules */ }

Question 4

How do you make sure an image is never wider than it’s container?

Answer 4

max-width: 100%;

height: auto;

Question 5

What are the four viewport units?

Answer 5

vw (viewport width): 10vw would be 10% of the viewport’s width.
vh (viewport height): 3vh would be 3% of the viewport’s height.
vmin (viewport minimum): 70vmin would be 70% of the viewport’s smaller dimension (height or width).
vmax (viewport maximum): 100vmax would be 100% of the viewport’s bigger dimension (height or width).