CSS media query


<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" >


.title {
  font-size: 40px;
}
 
@media (max-width: 600px) {
  .title {
    font-size: 20px;
  }
}

모바일 퍼스트: min - 분기점 낮은 순서부터 작성

데스크탑 퍼스트 : max - 분기점 높은 순서부터 작성

대부분의 경우 첫 번째 방법

왜냐하면 두 번째 방법처럼 CSS를 분리해 두더라도, 브라우저는 '에라 모르겠다'며 일단 모든 CSS 파일을 다운로드

반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리

이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다.

https://nykim.work/84

For Video

Media Queries in HTML Video

Before you get too far into this post, maybe read Browser Video Players Review. There I wade into the accessibility of the <video> element based on the video players browsers provide. Then maybe read Scott Jehl’s How to Use Responsive HTML Video (…and Audio!). I am leaning on support in…

https://adrianroselli.com/2023/12/media-queries-in-html-video.html

CSS media query

For Video

Recommendations