CSS media query
[<link/>](https://texonom.com/link-c97e91c6ca7c42a1afeeb8c00fc81e88) 



[CSS Media Query Type](https://texonom.com/css-media-query-type-37138d0636454a738aa9cf7e0a7c7bc6)


[CSS Media Query Operator](https://texonom.com/css-media-query-operator-9e29edbe55a54121883dbb44781ba99e)


[CSS Media Query Attributes](https://texonom.com/css-media-query-attributes-2035e4f555234d3e8e2c15e400705abb)

```type<link rel="stylesheet" media="all and (min-width:1200px)" href="desktop.css" ><link rel="stylesheet" media="all and (min-width:768px) and (max-width:1199px)" href="laptop.css" >```
```type.title {  font-size: 40px;} @media (max-width: 600px) {  .title {    font-size: 20px;  }}```
- 모바일 퍼스트: min - 분기점 낮은 순서부터 작성
- 데스크탑 퍼스트 : max - 분기점 높은 순서부터 작성
대부분의 경우 첫 번째 방법
왜냐하면 두 번째 방법처럼 CSS를 분리해 두더라도, 브라우저는 '에라 모르겠다'며 일단 모든 CSS 파일을 다운로드



> [반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리](https://nykim.work/84)






