About Media Queries
Media quieries are used to define different style rules depending on the media type.
Media queries are especially important today due to the many devices and screen sizes that require
adjustments to effectively display a webpage to a user. Media quieries can check the
width and height of the viewport and of the device, its orientation, and the resolution.
A min-width media query will apply a style to a if a viewport is a certain width or
larger while a max-width media query will apply to a style if a viewport is a
certain width or smaller.
We start with developing for smaller screens and then add layouts for larger screens with
media queries as we use a mobile-first display approach. It's usually easier to
create for smaller screens first and then move onto larger screens because the size of the
screen increases, and our content will need smaller adjustments to account for the
increased space. Also, many users will use phones or tablets which have smaller display screens
Relative Units
Relative units are different from fixed units such as pixels. Relative units specify a
length in relation to another length property. Relative units are used in web design since
they are more scalable to different mediums and screen sizes. There are several different
relative units. "em" is relative to the font size of an element; 5em would be 5 times the
size of the current font. One can also use percentages (%) which are relative to the parent
element. "vw" and "vh" are relative to the viewport's width and height, respectively.
Meta Viewport Tag
The meta viewport tag is added to the head element in the HTML page. It allows the designer
to take control of the viewport. It will instruct the browser to follow the screen width
of the device. Wihout the meta viewport tag, the content of a webpage is often rendered
incorrectly or ineffectively. Rather than wrapping around, it will scale down to fit the
smaller screen size. With the meta viewport tag, text will wrap around and be sized
appropriately and images will take up the full width of the page.