CSS Media Queries is a type of conditional statement that could be used for targeting specific screen sizes. It can target the width and height of your browser, or it can use orientation, resolution, aspect ratio, and color depth. It is define as @media rule, introduced in CSS2. The available of this rule made it possible to define different style rules for different media types.
Media queries can be used to change styles if certain conditions are met. For example: they can tell browsers when to render text at smaller sizes; determine how images should appear at different dimensions; specify whether content should break onto multiple lines for easier reading on small screens etc.
Media Queries work by matching expressions against specified features such as pixel density or aspect ratio of an input device like mobile phone screen vs desktop computer monitor screen. A match means that the browser will apply all styles within the curly brackets which follow it for compatibly matched elements only–meaning that it will ignore those styles for all other elements.
There are three different types of queries: “screen”, “print”, and “speech”. “all” is used to include all 3 types.
@media screen and (min-width: 768px) {
body {
background-color: #050505;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px){
.right-column{
width: 50%;
}
}
The importance of media queries is in the flexibility it provides to create a responsive web design. Responsive designs provide an optimal viewing experience by using fluid layouts which adjust their width and layout depending on screen size, orientation or anything else that might change with different devices.
It’s important for designers to use all the tools at their disposal when crafting websites because every device has its own set of constraints including resolution, pixel density, input type (touch vs click), text-size needs etc. Media Queries let you write CSS rules based on these differences so they don’t have to be specified in each individual breakpoint any more than necessary. They also simplify your CSS since you only need one set of rules instead of several redundant ones.
