CSS에서 `@media screen and (max-width: 1024px)`는 어떻게 작동하나요?

CSS의 "@media screen and (max-width: 1024px)" 규칙 이해

제공된 코드 조각은 CSS 미디어입니다. 특정 화면 해상도나 기기 크기를 타겟팅하는 것으로 보이는 검색어입니다. 목적을 이해하기 위해 구성 요소를 분해해 보겠습니다.

@media screen: 미디어 쿼리의 이 부분은 장치가 자신을 식별할 때만 적용되어야 함을 지정합니다. "화면" 카테고리. 이는 일반적으로 데스크톱 브라우저와 특정 스마트폰에 적용됩니다.

및 (최대 너비: 1024px): 미디어 쿼리의 두 번째 부분은 스크롤 막대를 포함하여 브라우저 창의 최대 너비를 확인합니다. . CSS 규칙의 적용을 너비가 1024픽셀 이하인 장치 또는 브라우저 창으로 제한합니다.

결합: 이 두 구성 요소를 합치면 미디어 쿼리 "@media screen and (max-width: 1024px)'은 그 안의 특정 CSS 규칙이 최대 너비가 1024인 '화면' 장치로 간주되는 장치에만 적용된다는 의미입니다. 픽셀.

실용 적용:

상속받은 CSS 코드는 화면 너비가 1024픽셀 미만일 때 "bg" 클래스의 이미지를 대상으로 하는 것으로 보입니다. 이 경우 이미지는 여백 조정이 적용된 화면의 가로 중앙에 배치됩니다.

기기 호환성:

이전 브라우저에서는 지원하지 않을 수 있다는 점에 유의하는 것이 중요합니다. 미디어 쿼리 내의 "max-width" 속성. 또한 일부 데스크톱 브라우저에서는 너비가 1024픽셀보다 크게 설정될 수 있으므로 이러한 경우에는 CSS 규칙이 적용되지 않습니다.

결론:

이해함으로써 "@media 화면 및 (최대 너비: 1024px)" 표기법을 사용하면 CSS 코드에서 특정 장치 크기나 화면 해상도를 효과적으로 타겟팅하고 모양을 사용자 정의할 수 있습니다. 해당 기준에 따라 웹사이트의 기능을 향상시키세요.

위 내용은 CSS에서 `@media screen and (max-width: 1024px)`는 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!