[CSS] 20) 미디어쿼리 (#@media #DPI)

Codecademy front-end engineer course

DAY20

• Learn Responsive Design 2) Media Queries

---

**When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.

 

 

-Media Queries [미디어 쿼리란?]

CSS uses media queries to adapt a website’s content to different screen sizes.

-An example of media queries-

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

@media	This keyword begins a media query rule and instructs the CSS compiler on how to parse the rest of the rule.
only screen	- Indicates what types of devices should use this rule. - screen is the media type always used for displaying content, no matter the type of device. The only keyword is added to indicate that this rule only applies to one media type (screen).
and (max-width : 480px)	the rule is called a media feature(the conditions that must be met in order to render the CSS within a media query.), and instructs the CSS compiler to apply the CSS styles to devices with a width of 480 pixels or smaller.
another declaration	CSS rules are nested inside of the media query’s curly braces. The rules will be applied when the media query is met.

 

 

- Range

By using multiple widths and heights, a range can be set for a media query.

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
}

-> apply its CSS rules only when the screen size is between 320 pixels and 480 pixels.

Notice the use of a second and keyword after the min-width media feature.

This allows us to chain two requirements together.

@media only screen and (min-width: 320px) { 
    /* ruleset for >= 320px */
}
 
 
@media only screen and (min-width: 480px) { 
    /* ruleset for >= 480px */
}

it can override CSS rules present in the first media query or apply additional CSS rules that are not already present in the first.

 

 

 

- Dots Per Inch (DPI)

Another media feature we can target is screen resolution. 해상도 관련

To target by resolution, we can use the min-resolution and max-resolution media features.

These media features accept a resolution value in either dots per inch (dpi) or dots per centimeter (dpc).

@media only screen and (min-resolution: 300dpi) {
    /* CSS for high resolution screens */
}

-> the example above targets high resolution screens by making sure the screen resolution is at least 300 dots per inch.

 

 

 

 

- And Operator 

we chained multiple media features of the same type in one media query by using the and operator.

The and operator can be used to require multiple media features. 

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
    /* CSS ruleset */
}

-> By placing the and operator between the two media features, the browser will require both media features to be true before it renders the CSS within the media query. 

 

 

 

- Comma Separated List 

 media features can be separated in a comma separated list.

@media only screen and (min-width: 480px), (orientation: landscape) {
    /* CSS ruleset */
}

->In the example above, we used a comma (,) to separate multiple rules. 

• The screen is more than 480 pixels wide
• The screen is in landscape mode

(Note that the second media feature is orientation. The orientation media feature detects if the page has more width than height. If a page is wider, it’s considered landscape, and if a page is taller, it’s considered portrait.)

 

 

 

 

-Breakpoints [브레이크포인트]

How do we determine what queries to set? [쿼리를 어떻게 설정할까?에서부터 시작]

The points at which media queries are set are called breakpoints.

Breakpoints are the screen sizes at which your web page does not appear properly.

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* CSS ruleset */
}

-> if we want to target tablets that are in landscape orientation, we can create the following breakpoint above.

 

 

*However, setting breakpoints for every device imaginable would be incredibly difficult because there are many devices of differing shapes and sizes.

Rather than set breakpoints based on specific devices, the best practice is to resize your browser to view where the website naturally breaks based on its content. 

The dimensions at which the layout breaks or looks odd become your media query breakpoints. 

 

you can set media query breakpoints that create the best possible user experience on a project by project basis, rather than forcing every project to fit a certain screen size. 

Check out this list of breakpoints by device widths. Use it as a reference of screen widths to test your website 

 

@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .page-title, .page-description {
    float: left;
    width: 20em;
}
 
  .page-description {
    text-align: left;
}
}

 

 

 

 

** 크롬 개발자 툴에서 여러 media queries 확인하기

https://developers.google.com/web/tools/chrome-devtools/device-mode

Chrome DevTools에서 Device Mode로 휴대기기 시뮬레이션  |  Google Developers