모범 사례 : 스타일 : 소형 기기

Question

사이트 캐스 케이 딩 스타일을 작성할 때 우리가 미디어를 사용하는 소형 장치에 지정할 수는

를 쿼리 예를 들어, @media only screen and (min-width: 480px) and (max-width: 767px) {}

특정 페이지 수준 (예 : .html), 스타일 시트 링크 또는 .css 자체에서 입력 할 수 있습니다.

완전히 다른 스타일 시트를 제공하고 기본 스타일 시트를로드하고 "모바일 전용"버전으로 덮어 쓰거나 스타일 시트 자체에서 선택기를 덮어 쓰는 것이 좋습니다. (아마도 레이아웃 스타일은 상호 배타적 일 것입니다.)

불필요한 작업을 피하기 위해 작은 장치가 먼저 적용되지 않는 스타일을 읽지 않도록 시도해야합니까?

마지막으로 개발자는 소형 장치와 호환되지 않을 수있는 반응 형 스타일에 중점을 두어 이러한 질문을 모두 피하십시오?

Answer 1

추가 스타일 시트를로드하지 않습니다. 이는 불필요한 요청 일뿐입니다. @media 쿼리를 사용하여 기본 스타일 시트의 스타일 아래 스타일을 덮어 써야합니다.