About Media Queries
Media queries are vital to responsive CSS design because they display styling based on set criteria. Possible criteria include the width, orientation, media type, and resolution of the device's viewport. The media query can also check for some preference settings in the user's browser, such as reduced motion, data usage, and transparency.
One popular criterion used by developers is the min-width property. If the device matches the minimum width or is wider, the media query’s styles will override any styling set for smaller devices. If you design the mobile layout for a website first, you probably use the min-width property in your media queries.
Alternatively, if you design the desktop layout for a website first, you probably use the max-width property. If the device matches the max-width property or is narrower, the media query’s styling overrides the layout for a larger device.
I recommend designing mobile first because mobile layouts are the simplest version of the website. Due to the lack of space, the elements are mostly stacked on top of each other in a simple, vertical layout. As the screen gets larger, you can use the min-width property to add more complex layouts as necessary. It's easier to add complexity with coding than it is to remove it.
Relative Units
Developers use relative units due to the different sizes of devices and their viewports. For example, a 16pt font might look large and readable on a mobile device, but on a huge desktop monitor, it will look tiny. Using a relative unit allows the element to grow and shrink proportionally.
The em unit is the most popular. Its size is relative to either the size of the current element or its parent element. For example, a font that is 1.5 em is 150% the size of the font's computed size. Since the em is relative to its current element, it will scale with any size preferences set by the user's browser. I do not recommend making the em size relative to a parent element, because that can become complicated very quickly when trying to calculate the size of children, grandchildren, and great-grandchildren.
For a similar reason, I recommend using the rem (root em) and percentage (%) unit sparingly. Their sizes are relative to the size of the root element and parent element's dimensions respectively. Since everything on the page is scaled based on the root element or the parent, measuring and adjusting can get quite complicated if you use rem or percentages too frequently.
Viewport width (vw) and viewport height (vh) are scaled based on the width and height of the viewport. 1 vw or 1 vh equals 1% of the width or height of the viewport. The units can create layouts with a fluid responsiveness that scales proportionally as the user resizes their window on a desktop or changes the orientation of their mobile or tablet. However, the units have some flaws that can cause unpredictable scaling. For example, vw and vh do not take the size of any scrollbars, toolbars, or menus into account. They also don't account for margins or padding within containers. The units only look at the size of the viewport when determining scaling.
Meta Viewport Tag
When browsers display a website on a smaller screen, they default to zooming out to show the full width of the webpage. The smaller the viewport, the smaller the text and other elements must shrink to fit. The user navigates the webpage by zooming in and scrolling around. This is a cumbersome way to navigate a webpage.
To prevent the webpage from zooming out, you must add the meta viewport tag to the Head in HTML. Instead of zooming out, the webpage’s elements, such as text, links, and images, will drop to a new line when they hit the maximum width of the viewport. If an element is larger than the width of the device, such as an image, only then will it start to shrink.