Media Queries Guide.

Media queries

Media queries are a CSS technique used to apply different styles to a website or web application based on the characteristics of the device or screen on which it is being viewed, they allow developers to create responsive designs that adapt to different screen sizes and resolutions, making it possible to create a single codebase that looks and behaves well on a wide range of devices, including desktops, laptops, tablets, and smartphones.

Using Media Queries:

Media queries are typically written using CSS @media rules, you can target specific devices or screen sizes by specifying conditions based on various characteristics such as width, height, resolution, aspect ratio, and orientation which specify the conditions under which a particular set of styles should be applied.

Syntax:

Basic syntax for a media query:

@media (condition) {
  /* styles go here */
}

The condition can be any of the following:

• width and height of the viewport (min-width, max-width, min-height, max-height)

• width and height of the device screen (min-device-width, max-device-width, min-device-height, max-device-height)

• resolution of the device screen (min-resolution, max-resolution)

• aspect ratio of the viewport (aspect-ratio)

• orientation of the device (orientation)

• color and monochrome (color, min-color, max-color, monochrome, min-monochrome, max-monochrome)

Media queries

Here are some most common examples to use media queries to target different types of devices:

1. Targeting smartphones in portrait mode:

@media only screen and (max-width: 480px) {
  /* styles for smartphones in portrait mode */
}

2. Targeting tablets in landscape mode:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* styles for tablets in landscape mode */
}

3. Targeting desktops and laptops:

@media only screen and (min-width: 1025px) {
  /* styles for desktops and laptops */
}

4. Targeting high resolution devices:

@media only screen and (min-resolution: 192dpi) {
  /* styles for high resolution devices */
}

5. Targeting small devices such as smartphones and phablets:

@media only screen and (max-width: 767px) {
  /* styles for small devices */
}

6. Targeting medium-sized devices such as tablets:

@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* styles for medium-sized devices */
}

7. Targeting large devices such as desktops and laptops:

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* styles for large devices */
}

8. Targeting extra-large devices such as large desktops:

@media only screen and (min-width: 1200px) {
  /* styles for extra-large devices */
}

9. Targeting devices with a specific aspect ratio:

@media only screen and (aspect-ratio: 4/3) {
  /* styles for devices with a 4:3 aspect ratio */
}

10. Targeting devices with a specific orientation:

@media only screen and (orientation: portrait) {
  /* styles for devices in portrait orientation */
}

11. Targeting devices with a specific resolution:

@media only screen and (min-resolution: 300dpi) {
  /* styles for devices with a resolution of at least 300dpi */
} 

---

You have seen in media queries it supports logical operators such as and and not that allow you to chain multiple conditions together to target specific devices more accurately.

• and operator: The and operator is used to specify that all the conditions within the parentheses must be true for the styles to be applied like this 👇🏼.

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* styles for tablets in landscape mode */
}

In this example, the styles will be applied only if the device has a minimum width of 768px, a maximum width of 1024px, and an orientation of landscape.

• not operator: The not operator is used to specify that a condition must be false for the styles to be applied like this 👇🏼.

@media not screen and (color) {
  /* styles for devices without color screens */
}

In this example, the styles will be applied only if the device does not have a color screen.

• , operator: The , operator allows you to apply styles based on multiple conditions. If any of the conditions are true, the styles will be applied like this 👇🏼.

@media (min-width: 600px), (orientation: landscape) {
  /* styles for devices with a minimum width of 600px or in landscape orientation */
}

Maybe you will need to adjust the values to match the specific breakpoints of your design.

FOLLOW FOR MORE SUCH CONTENTS

Connect with me - Twitter, Github, Linkedin Instagram