미디어 쿼리 CSS, 반응형 디자인 및 CSS 그리드 미디어 쿼리

미디어 쿼리와 미디어 규칙에 대해 이야기해 봅시다. media at 규칙은 하나 이상의 미디어 쿼리 결과를 기반으로 요소의 스타일을 지정하는 데 사용할 수 있습니다. 평신도의 용어로 미디어 쿼리는 브라우저가 내가 어떤 종류의 장치를 사용하고 있으며 그 특성이 무엇인지 확인하는 것입니다. 그런 다음 사용자 장치의 특성이 개발자가 설정한 특정 기준과 일치하는 경우 웹 페이지의 스타일을 변경할 수 있습니다. 그런 다음 다양한 장치 및 환경을 처리하기 위해 여러 쿼리를 가질 수 있습니다. 그러나 너무 많은 미디어 쿼리를 추가하면 로드 시간이 느려질 수 있으므로 주의하십시오.

통사론

미디어 쿼리는 선택적 미디어 유형과 논리 연산자를 사용하여 다양한 방식으로 선택적으로 결합할 수 있는 여러 미디어 기능 표현으로 구성됩니다.
그래서 입이 꽉 찼습니다. 이것을 조금 분해해 봅시다.
미디어 유형은 쿼리가 적용되는 출력 장치의 광범위한 범주(인쇄, 화면 또는 모두)입니다. 미디어 기능은 해당 사용자 에이전트 출력 장치의 특정 특성입니다. 미디어 쿼리의 예는 다음과 같습니다.

@media screen (min-width: 1400px) {
 p {
 color: #000;
 }
}

위 쿼리는 사용자 뷰포트가 1400픽셀 이상인 경우 모든 단락 요소를 검은색으로 만듭니다. 대부분의 CSS와 마찬가지로 이것은 매우 간단한 개념이며 사용 방법에 관한 것입니다. 특정 미디어 기능 및 논리 연산자에 대한 자세한 내용은 확인하는 것이 좋습니다mdn.

반응형 디자인 및 그리드

미디어 쿼리는 반응형 디자인을 만드는 데 필수적인 부분입니다. 미디어 쿼리에 대한 많은 사용 사례가 있지만 그리드 시스템의 중단점이 제가 가장 좋아하는 것입니다. 여기서 중단점은 레이아웃이 어떤 식으로든 변경되는 특정 크기를 의미합니다. 텍스트 열이 3개 있는 사이트를 생각해 보세요. 이것은 20"게임 모니터에서 멋지게 보입니다. 그러나 가독성을 위해 모바일 장치의 단일 열에 정보를 원할 수 있습니다. 모바일 화면 크기(약 500px)에 대한 중단점을 설정할 수 있으므로 이러한 방식으로 모든 텍스트를 볼 수 있습니다. 단일 열에 있을 것입니다.

부트스트랩

반응형 디자인을 위한 미디어 쿼리의 좋은 예는 css 프레임워크bootstrap입니다. 이 프레임워크에는 주어진 요소에 대해 설정할 수 있는 6개의 기본 중단점이 있습니다. 즉, 지정된 요소는 다른 요소를 동일하게 유지하면서 화면 크기에 따라 레이아웃에 맞는 방식을 변경합니다. 부트스트랩의 소스 코드를 살펴보고 미디어 쿼리를 사용하는 방법을 확인하는 것이 좋습니다. 그것이 내가 그들을 정말로 이해하기 시작한 방법입니다. 사이트를 재미있게 스타일링하세요.