Responsive Web Design
Responsive web design allows your content to automatically resize or hide depending on the device it is viewed on. This ensures your website will look good in relation to the device (tablet, desktop, or phone). Images and text can both be made responsive to change the look of your website.
Types of Media Queries
Media queries are a technique used to deliver a tailored style sheet to computers, mobile phones, and tablets. CSS media types include: all, print, and screen. All is used for all media type devices. Print is used for preview mode. Screen is used for computer screens, mobile phones, and tablets.
Uses of Media Queries
Width and height of the viewport, orientation of the viewport, and resolution can all be checked by Media Queries. The @media rule makes it possible for you to define different style rules depending on the media type. Media queries look for the capability of a device, rather than just the type of device.