Media Query in CSS

What is Media Query in CSS ?

A media query in web development is a technique used in CSS to apply different styles to a webpage based on various characteristics of the device on which it's being viewed. Essentially, media queries allow you to conditionally apply styles based on factors like screen size, device orientation, resolution, and more.

How can i apply media query to my code ?

/* Your regular CSS styles */

/* Media Query Syntax */
@media screen and (max-width: 768px) {
  /* CSS styles specific to screens with a maximum width of 768 pixels */
  /* Add your responsive styles here */
}

1. Identify the Point of Adaptation: Determine at what screen size or condition you want your styles to change. For instance, you might want to adjust your layout when the screen width is less than 768 pixels.

2. Write the Media Query Block: Use @media followed by the condition enclosed within parentheses {}. The condition can involve various factors like max-width, min-width, orientation, max-height, etc. In the example, it's targeting screens with a maximum width of 768 pixels.

3. Add Specific Styles: Within the media query block, add the CSS rules that you want to apply when the condition is met. These styles will override or modify the default styles defined outside the media query block for screens that match the specified condition.

Example

Let's say if we want to change the font size of a paragraph when the screen width is less than or equal to 768 pixels:

/* Regular CSS for larger screens */
p {
  font-size: 16px;
  line-height: 1.5;
}

/* Media Query for smaller screens */
@media screen and (max-width: 768px) {
  p {
    font-size: 14px; /* Adjusted font size for smaller screens */
  }
}

When the screen width is 768 pixels or less, the paragraph font size will change to 14 pixels, overriding the default size specified outside the media query.

Media Features :

Media features in CSS are conditions that target specific characteristics or capabilities of the device or the environment in which a webpage is being viewed. These features allow you to create responsive designs by applying styles based on conditions such as screen size, resolution, orientation, and more.

Width and Height Related Features:

• width and height: Specifies the width or height of the viewport.

    @media screen and (max-width: 600px) { /* Styles for screens with a maximum width of 600px */ }
  

• min-width and min-height: Sets a minimum width or height for the viewport.

    @media screen and (min-width: 1024px) { /* Styles for screens with a minimum width of 1024px */ }
  

Device Orientation:

• orientation: Targets the orientation of the device (landscape or portrait).

    @media screen and (orientation: landscape) { /* Styles for landscape orientation */ }
  

Resolution Related Features:

• resolution: Specifies the resolution of the output device.

    @media screen and (min-resolution: 300dpi) { /* Styles for devices with a minimum resolution of 300 dots per inch */ }
  

Device Aspect Ratio:

• aspect-ratio: Targets the aspect ratio of the viewport.

    @media screen and (aspect-ratio: 16/9) { /* Styles for screens with a 16:9 aspect ratio */ }
  

Other Features:

• hover: Detects whether the primary input mechanism can hover over elements.

    @media (hover: hover) { /* Styles for devices with hover capability */ }
  

• pointer: Detects the accuracy of the primary pointing device.

    @media (pointer: coarse) { /* Styles for devices with imprecise pointing devices */ }
  

These media features, used within @media queries in CSS, allow for the creation of styles tailored to different devices, screen sizes, resolutions, and capabilities. By leveraging these features, developers can create responsive designs that adapt and perform optimally across a wide range of devices and environments.