Learn HTML, CSS, and JavaScript/

...

/

Media Queries

Media Queries

Gain a thorough understanding of media queries and how to use them to create responsive, mobile-first designs.

We'll cover the following...

Media queries are necessary to ensure that our websites look and function well across a variety of devices. In this lesson, we’ll look into writing @media rules for different screen sizes and explore the concept of building mobile-first designs.

Understanding media queries

Media queries allow us to apply CSS styles based on conditions such as screen size, resolution, orientation, and more. By using media queries, we can tailor our designs to different devices, enhancing user experience.

Press + to interact

Writing @media rules

The basic syntax of a media query in CSS is as follows:

@media media-type and (media-condition) {
  /* CSS rules */
}
Basic syntax of a media query

  • @media: Indicates the start of a media query.

  • media-type (optional): Specifies the type of media (e.g., screen, print).

  • media-condition: Defines the condition under which the styles should apply (e.g., max-width, min-width).

Let’s consider some media rules for different screen sizes to ensure a responsive and user-friendly design across various devices.

Rules for small-sized screens

The following example shows how to style background-color for screens up to 600 pixels wide. ...

Access this course and 1400+ top-rated courses and projects.