CSS Media Queries: Beginner's Guide For Responsive Website

In the ever-changing world of web development, creating websites that look great and function seamlessly on all devices, such as mobile phones, tablets, and laptops is crucial. In this post, you'll learn about CSS Media Queries to make your websites responsive.

Let's jump right into it!🚀

What are CSS Media Queries?

CSS Media Queries are used to apply different styles on different devices based on screen width, height, device orientation, resolution etc. By using media queries, you can create web designs that respond perfectly to the user's device and enhance the user experience.

The Basic Syntax of Media Queries

The basic syntax for media queries is as follows:

@media media-type and (media-expression) {
  /* CSS styles go here */
}

Here,

@media: This is used to represent the beginning of a media query.

media-type: This tells the browser that for what kind of media this code is. You can use the following values for this:

• all - for all media-type devices.

• print - for printers.

• screen - for desktop screens, laptops, tablets, mobile phones etc.

• speech - for screenreaders who read the page out loud.

media-expression: This is a rule, that has to be passed for the CSS to be applied.

For example, when specifying the screen width as 600px in the expression, the associated CSS styles will take effect exclusively when the screen size matches this width; otherwise, they will remain inactive.

{ /* CSS styles go here */ }: Here the CSS styles will be written that you want to apply to the given media-type and media-expression.

Let's take an example to understand this more clearly.

@media screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

Here, media-type is screen and media-expression is max-width: 600px which means this will change the background color of the body when the width of the screen is 600px or less than 600px (because here the maximum width is 600px).

The provided media expression is also called the breakpoint. So here 600px is the breakpoint.

Now, you might be thinking about what values you can give to media-expression.🤔

Let me tell you the most common values for media-expression.

• width and height of the device

• orientation (for example, tablet/mobile phone is in landscape or portrait mode)

• resolution

• ranged syntax

Let's see some examples to understand each of the above values.

Examples

The width and height of the device

@media screen and (max-width: 675px) {
  body {
    background-color: red;
    color: white;
  }
}

In this example, when the screen size is 675px or less than 675px, the background color and color of the body will be changed.

Device Orientation

You can give orientation as landscape or portrait.

/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
  body {
    background-color: red;
    color: white;
  }
}

Resolution

You can also target devices based on their resolution.

/* Styles for high-resolution displays */
@media screen and (min-resolution: 300dpi) {
  body {
    background-color: red;
    color: white;
  }
}

Ranged syntax

@media (min-width: 375px) and (max-width: 758px) {
   body {
    background-color: red;
    color: white;
  }
}

In this example, when the screen size is between 375px and 758px, the background color and color of the body will be changed.

By using media queries you can set different CSS styles for different devices.

Common Breakpoints

Now, after learning about media queries, you may have a question "How do I know about the breakpoint of the screens?"🤔

So here are some commonly used breakpoints for the devices:

/* Extra large screens */
@media (min-width: 1920px){
  /* CSS styles go here */
}

/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px){
  /* CSS styles go here */
}

/* Laptops/Large tablets */
@media (min-width: 992px) and (max-width: 1199px){
  /* CSS styles go here */
}

/* Small tablets */
@media (min-width: 768px) and (max-width: 991px){
  /* CSS styles go here */
}

/* Extra small devices */
@media (min-width: 481px) and (max-width: 767px){
  /* CSS styles go here */
}

/* Mobile */
@media (max-width: 480px){
  /* CSS styles go here */
}

Standard breakpoints are not explicitly defined, but you can use these commonly used ones to make your websites responsive.

That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!