How does a CSS media query work, and why is it useful?
CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things. They work by checking the characteristics and then they apply your specific styles. This is useful for creating responsive designs that change in format for screen size on different devices.
What “media features” are supported by media queries — such as “orientation” or “max-width” — and what do they do? Pick any 4 to explain.
As shown in the Tiny Project videos, these “media features” are supported by media queries:
Max-Width: Targets different devices with maximum width which allows me to adjust different styles for smaller screens (like Phones).
Mid-Width: Targets different devices with minimum width which allows me to adjust different styles for a variety of screen sizes (like Phones).
Orientation: Targets the orientation of a device to see whether it is a device that has a landscape or portrait orientation.
Resolution: Targets the pixel densities of the device’s screen which can help with providing a higher resolution to your images on different devices with high-density screens for better quality.