CSS Media Queries

What are Media Queries?

Media queries very important for creating Responsive Web Pages.
By using media queries we can customize the behaviour (presentation) of DOM elements on the screen for particular devices or screen sizes without changing the actual markup.

Basic Media Query Syntax

@media (logical-operator) (media-type) and (expressions) {
    //CSS Code
}

Logical Operators

logical operators are used to provide additional conditions.

Different logical operators are and , not, only and ,

Media Types

Media types determine for which device CSS must be applied and is used after @media keyword.

Example

@media all // for all devices
{
    //CSS
}
@media screen // for computers, tablets and mobile devices
    //CSS
}
@media print // Used for printing devices
{
    //CSS
}

Expressions

Expressions are threshold value for breakpoints for defining HTML elements behaviour in specific devices and orientation.

Some of the common expressions you can provide value for are.

• Width

• Height

• Device-width

• Device-height

Commonly used Breakpoints for different devices.

For mobile devices

@media only screen and (min-width: 320px) and (max-width: 479px) {
    //CSS Code
}

For mobile devices (landscape)

@media only screen and (min-width: 480px) and (max-width: 767px) {
    //CSS Code
}

For Tablets

@media only screen and (min-width: 768px) and (max-width: 979px) {
    //CSS Code
}

For small desktops

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    //CSS Code
}

For typical desktops

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    //CSS Code
}

For large desktops

@media only screen and (min-width: 1200px) {
    //CSS Code
}

Thank you for reading.