화면 크기/기기에 따라 적절한 CSS 스타일을 선택하는 방법

Question

Bootstrap 3의 반응형 유틸리티에는 화면 해상도에 따라 특정 블록을 숨기거나 표시할 수 있는 멋진 CSS 클래스가 있습니다 ;http://getbootstrap.com/css/#Response-utilities-classes

화면 해상도에 따라 적용하거나 적용하지 않으려는 CSS 파일에 몇 가지 스타일 규칙이 있습니다.

어떻게 해야 하나요?

프로덕션 배포를 위해 모든 CSS 파일을 하나의 파일로 압축하지만, 다양한 화면 해상도에 대해 별도의 CSS 파일을 사용하는 것 외에는 다른 해결책이 없는 경우입니다.

Answer 1

감지는 자동입니다. 각 화면 해상도에 사용할 수 있는 CSS를 지정해야 합니다.

으아악

Answer 2

쿼리하려면 @media를 사용하세요. 그들은 그 요구에 정확히 들어맞습니다. 작동 방식의 예는 다음과 같습니다.

으아악

이 기능은 너비가 800px 이하인 장치에서만 작동합니다.

Mozilla 개발자 네트워크에서 미디어 쿼리에 대해 자세히 알아보세요.