Media query , responsive web
Tags: mediaquery, css, responsive, responsiveweb
Published: 2021-11-11 14:59:20

#Media query
Media queries are useful when you want to <strong><em>modify your site or app depending on a device's general type</em></strong>(such as screen and print) or specific characteristics and parameters(such as <strong>screen resolution, device orientation, operating system preference or browser viewport width</strong>).
The most common way is targeting particular viewport ranges and apply custom styles. 
```css
/* 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
```css
@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 <code>&lt;style&gt;</code>, <code>&lt;link&gt;</code>, <code>&lt;source&gt;</code>, and other HTML elements with the media = attribute.
- to test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() javaScript methods.
```html
<!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
- <code><strong>all</strong></code>: matches all devices
- <code><strong>print</strong></code>: matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print
- <code><strong>screen</strong></code>: matches all <strong><u>devices with a screen</u></strong>
- <code><strong>speech</strong></code>: matches devices that read the content audibly, such as screenreader.

Code below is for @media print
```html
<abbr title="world wide web consortium">w3c</abbr>
```
```css
@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
- <code><strong>and</strong></code>: used for <u>combining multiple media features together into a single media query</u>, requiring each chained feature to return true for the query to be true. 조건을 모두 만족하는 경우에만 스타일 적용.
```css
/* matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* styles */
  }
}
```
- <code><strong>not</strong></code>: used to negate a media query, returning true if the query would otherwise return false. 조건을 반전하는 경우 스타일 적용.
```css
@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}
```
- <code><strong>,(comma)</strong></code>: 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. 조건중 하나라도 만족하는 경우 스타일 적용
```css
/* 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 */
  }
}
```
- <code><strong>only</strong></code>: Applies a style only if an entire query matches. If you use the only operator, you must also specify a media type. 미디어쿼리를 지원 하는 브라우저에서만 작동


```css
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. (<strong><code>window.devicePixelRatio</code></strong>)
2.You can also check here: https://johankj.github.io/devicePixelRatio/

## About [viewport](https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html?lang=en)