Responsive Web Design Principles

Question 1

What does a Media Query do?

Answer 1

Changes the presentation of content based on different viewport sizes. The viewport is a user’s visible area of a web page, and is different depending on the device used to access the site. Here’s an example of a media query that returns the content when the device’s width is less than or equal to 100px:

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

Question 2

We have a paragraph with 20px for font-size. How would we use media queries to make paragraphs 10px font-size at 800px or less?

Answer 2

p {
font-size: 20px;
}

@media (max-height: 800px) {
p {font-size: 10px;}
}

Question 3

What two things will make any image responsive?

Answer 3

A max-width of 100% and height: auto. The max-width will make sure that it’s not bigger than the container it’s in, and the height: auto will make the image keep its original aspect ratio.

Question 4

What are the four different viewport units?

Answer 4

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