For beginners, Media queries provide us with a way to resize our web pages or app user interface to suit every screen size. Thus making our websites responsive to every device type and feature.
A media query contains options of type and characteristics. Media types refer to the categories of devices for which a media query may apply to. Examples include: all, print, screen. Media features describe the characteristics of the user device or output environment. Examples : pointer, hover, orientation, aspect-ratio etc.
TARGETING MEDIA TYPES :
The necessity of media queries is noticed when designing websites for special media types like printers or audio-based screen readers. The below screenshot shows a media query targeting print devices. NOTE: You can target multiple device types at once.
MEDIA FEATURES:
This refers to the characteristics of device types. Some devices have special characteristics which make them behave differently from others. For example, devices that support landscape and portrait modes should have responsive capabilities for the best user experience. Most media features have range capabilities. This simply means the minimum and maximum width extensibility. NOTE: Media features have to be bounded by brackets.
MERGING MEDIA TYPES AND FEATURES
Media types and media features can be combined using the keyword “and”. It joins together and sets both conditions to be true for all media devices. However, all conditions must be matched by the media device.
TESTING FOR MULTIPLE QUERIES
Using a comma ( , ), you can apply and modify styles when a user’s device matches ANY of the media types or features.
ADVANTAGES OF MEDIA RESPONSIVENESS
- It improves the user experience.
- Faster page load.
- Improved visibility in search engines.