TIL9 - CSS - Responsive Design

1. Relative Measurements

The CSS properties that have to do with "sizing" of an element can be specified in absolute or relative measurements

Absolute measurements refer to units of measurement that have fixed values that do not change with different screen size, etc.
> most common example is px

Relative measurements can be used to set the property in relative terms, so that an element's size can adjust automatically in relation to what it is relatively assigned to

• em: 1em is equal to the font-size of the element's parent element
  > ex) if the parent element's font-size is 16px, then 1em = 16px, 2em = 32px, etc.
• rem: the 'r' refers to 'root'. This is basically the same as em, but instead of the parent element, it refers to the "root" element's font-size. The "root" element is the html element.
  > to use rem, you must specify the font-size of the root element by writing the rules with the html selector
• %: percentages can also be used to size box-model features like width, height, padding, and border
  > it will be in terms of the element's parent element (the parent element's dimensions must be set first)
  > for padding and border, the horizontal and vertical padding/border will both be set relative to the parent element's width only - the height of the parent element will not be used
• for images and videos, specifying the width and setting height to auto will have the height automatically adjust, maintaining the original proportions. Same for vice versa

2. Media Query

You can set different rules to account for different screen sizes, so that the webpage components would be appropriately sized/positioned/displayed depending on which screen size it is being seen on

When a website's contents adjust to different screen sizes, this is called a responsive website

Media query is one method used to make the website responsive

Syntax:

@media only screen and (*rule for media query*) {
  *CSS rules*
}

• above CSS rules will only be applied to a device for which the specified rule for media query is true

ex)
To set font-size of the ".content" element class to 12px and its width to 80% for devices with screen width smaller than 480px:

@media only screen and (max-width: 480px) {
  .content {
    font-size: 12px;
    width: 80%;
  }
}

• you can set multiple media query rules in one line with and
  > ex)

@media only screen and (min-width: 500px) and (max-width: 800px) {
  .content {
    font-size: 12px;
    width: 80%;
  }
}

• you can set multiple media query rules for which only one needs be true for the CSS rules to be applied by separating the media rules with , instead of and
• the best practice for determining where to set media queries is to look at where the webpage's contents naturally break when resizing the browser