About Media Queries

Media queries are a type of CSS selector that target attributes of the browser rather than epecific elements. For example, min-width will target all browsers with a screen size that is wider than the specified minimum width. max-width will do the opposite, and target browsers with a screen narrower than the specified maximum width. These are useful for defining different styles for different screen sizes, like mobile and desktop layouts.

It is generally recommended to take a mobile-first design approach, then use min-width to add whitespace for larger displays. We do this because it is easier to fill in extra empty space than it is to compress an existing design into a smaller screen size.

Relative Units

In addition to static units, some properties can have a value with relative units. For typography, em represents the font size of the parent element and rem represents the font size of the root element, html. To set the font to twice the size of the root element, for example, you would use font-size: 2rem;. These can be useful for creating scalable and accessible designs where font sizes are based on the root element.

Percentage (%) can be used to set a property relative to the parent element, and is not limited to font size. For example, width: 50%; would set the width of an element to 50% of the width of it's parent element. Viewport width (vw) and viewport height (vh) are relative units that can be useful for creating responsive designs where the size of the content changes with the screen size. For example, width: 50vw; would cause the content to take up 50% of the available horizontal space in the browser window (viewport).

Meta Viewport Tag

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

This is a tag that will appear in the head of most mobile-optimized sites. It does two things. First, width=device-width sets the width of the content to the actual physical screen size of the device the content is being viewed on. This sets the value of one vw unit. Second, initial-scale=1 sets the default zoom level for the content when the page is loaded for the first time.