CSS : media

In CSS, media queries allow you to apply different styles based on specific characteristics of the device or viewport where the webpage is being displayed. Media queries provide a way to create responsive designs that adapt to different screen sizes, resolutions, and other device capabilities.

 

Media queries are introduced using the @media rule and can be used to specify different CSS rules and properties based on various conditions. The most common condition in media queries is the viewport width, but you can also target other aspects such as the device orientation, resolution, or specific media features.

 

Here's an example of a media query that adjusts the font size based on the viewport width:

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

In this example, the @media rule is used to target viewports with a maximum width of 600 pixels. When the viewport width is 600 pixels or less, the font-size property of the body element is set to 14px.

 

Media queries can also be used to target different types of devices or specific media features. For instance, you can adjust styles for print media, targeting specific screen resolutions, or even apply styles based on the device's orientation (portrait or landscape).

 

Here's an example of a media query targeting print media:

@media print {
  body {
    background-color: white;
    color: black;
  }
}

In this example, when the webpage is being printed, the background color of the body element is set to white and the text color to black.

 

Media queries provide a powerful tool for creating responsive designs and optimizing the appearance of web pages across different devices and media types. They enable you to tailor the styling and layout of your content to provide the best user experience on various screens and devices.

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

@media - CSS: Cascading Style Sheets | MDN

 

 

Categorize and save css files