Media Queries For Mobile, Laptop, Desktop And iPad For Making Responsive Website Design

Media Query

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 enable us to create a responsive website design (RWD) where specific styles are applied to small screens, large screens, and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

General Syntax of Media Query

@media (query) {
   /* CSS Rules used when query matches */
}

While there are several different items we can query, the ones used most often for responsive web design are min-width, max-width, min-height, and max-height.

Let's have a look at device-specific queries.

Mobile

There are two different resolutions for laptops.

/* For 480 Resolution */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
{ /* STYLES GO HERE */ }

Generally, this dimension is recommended for mobile.

/* For 640 Resolution */
@media only screen and (min-device-width: 360px) and (max-device-width: 640px) {
  /* STYLES GO HERE */
}

Laptop

There are two different resolutions for laptops.

/* For 1024 Resolution */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
    /* STYLES GO HERE */
}

/* For 1366 Resolution */
@media only screen and (min-width: 1030px) and (max-width: 1366px) {
    /* STYLES GO HERE */
}

Generally, this dimension is recommended for laptop

Desktop

@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ /* STYLES GO HERE */ }

iPad

/* If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work. */

/* Orientation : Landscape */
@media only screen
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)
and (min-device-width : 768px)
and (max-device-width : 1007px)
{ /* STYLES GO HERE */ }

/* Orientation: Portrait */
@media only screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 768px) and (max-device-width: 1007px) {
    /* STYLES GO HERE */
}

I have attached a sample.css file to this article. Guys, keep exploring. If you have any queries, please feel free to contact me.