Media query

Media queries are useful when you want to modify your site or app depending on a device's general type(such as screen and print) or specific characteristics and parameters(such as screen resolution, device orientation, operating system preference or browser viewport width).
The most common way is targeting particular viewport ranges and apply custom styles.

/* at-rule - media type - media feature */
/* at-rule - media type - media feature - operator - media feature */ 
@media screen and (min-width: 480px) {
  .element {
   /* apply style */
  }
}

@media

@media [media-type] ([media-feature]) {
  /* styles */
}

Media queries are used for the following.

to conditionally apply styles with the CSS @media and @import at-rules.
to target specific media for the <style>, <link>, <source>, and other HTML elements with the media = attribute.
to test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() javaScript methods.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>media query</title>
    <style>
        /* mobile first!! bootstrap이 대표적 */
        body {
            background-color: tomato;
        }
        /* for devices that has screen size of 1000px and smaller  */
        @media screen and (max-width:1000px) {
            body {
                background-color: green;
            }
        }
 /* for devices that has screen size of 500px and smaller 
 */
        @media screen and (max-width:500px) {
            body {
                background-color: violet;
            }
        }
    </style>
</head>
<body>

</body>
</html>

Types of media query

all: matches all devices
print: matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print
screen: matches all devices with a screen
speech: matches devices that read the content audibly, such as screenreader.

Code below is for @media print

<abbr title="world wide web consortium">w3c</abbr>

@media print {
    abbr::after {
                /* attr() : css 속성 함수입니다. */
        content: ' ('attr(title)')'
    }
}

Conditions

webkit-min-device-pixel-ratio:
webkit-max-device-pixel-ratio:
min-width: max width of viewport including scroll
max-width
orientation

Logical operators

and: used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true. 조건을 모두 만족하는 경우에만 스타일 적용.

/* matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* styles */
  }
}

not: used to negate a media query, returning true if the query would otherwise return false. 조건을 반전하는 경우 스타일 적용.

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

,(comma): commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator. 조건중 하나라도 만족하는 경우 스타일 적용

/* matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* styles */
  }
}

only: Applies a style only if an entire query matches. If you use the only operator, you must also specify a media type. 미디어쿼리를 지원 하는 브라우저에서만 작동

body{background:black;}

@media screen and (min-width:481px) and (max-width:1280px){
  body { background: red; }
}

@media screen and (max-width:480px){ 
  body { background: green; }
}

@media not screen and (orientation : landscape) { /* not always come after @media. default value is portrait */
  body { background: pink; }
}

@media screen and (-webkit-device-pixel-ratio : 2){ 
  body { background: royalblue; }
}

How to check the pixel ratio of a device?

1.Use BOM api. (window.devicePixelRatio)
2.You can also check here: https://johankj.github.io/devicePixelRatio/

Blog

Media query , responsive web

Dahye Ji