10 Responsive Design Principles

Question 1

Make element change size with viewport if it is larger or smaller than a certain size

Answer 1

@media (max-width: 350px) {
    :root {
      --penguin-size:200px;
      --penguin-skin: black;
    }
  }

When the frame becomes smaller than 350px, the black will take precedence.

max- means if the frame size is less than or equal to the number, apply the block styles
min- means if the frame size is greater than or equal to the number, apply the block styles

Question 2

Make image a certain proportion of the viewport and change size with the viewport.

Answer 2

img {
max-width: 100%;
height: auto;
}

max-width:10% means 10% of its container

so it will never be larger than the frame
height auto to make the image proportional (though it seems to do that anyway)

Question 3

How to prepare for a 300ppi + monitor?

Answer 3

Make the image half it’s actual resolution

Question 4

make type responsive to viewport size (make the text frame, but not font-size, change with viewport size)

Answer 4

p {
width: 30vw;
}
30% of the viewport width (can be greater than 100)

Question 5

what are some relative viewport unit measurements
(useful if you need to make the height change with the width??)
(4)

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