What is CSS Media Queries
What is CSS Media Queries?
Media query is a CSS technique introduced in CSS3.
It uses the
@media rule to include a block of CSS properties only if a certain condition is true.
Media queries allow you to define style rules for different media types.
They are fundamental part of RWD (Responsive Web Design) & are used to customize the appearance of website for various devices.
Media quarries are useful when you want to modify your app ‘s appearance depending on device’s type or specific characteristics and parameters .
How to Use media query?
A media query consists of media type and can contain one or more expressions, which resolve to either true or false. when media quarry is true, the corresponding style rules are applied.
Need a responsive website ? click here
Media types describe the general category of a device.
- all:: all media types devices
- print :: printers
- screen:: PCs, tablets, smartphones
- speech:: speech synthesizers
This example changes the background-color to coral if the viewport is 500 pixels wide or wider (if the viewport is less than 500 pixels, the background-color will be the default white color).
Media features describe specific characteristics of the user agent, output device, or environment. some of them are:
width, height, min-height, min-width, max-width, max-height, resolution, update, orientation, color, aspect-ratio, pointer, etc