CSS 미디어 쿼리는 화면 크기에 따라 웹 사이트 레이아웃을 어떻게 반응적으로 조정합니까?

CSS에서 미디어 쿼리의 역할 이해

CSS 영역에서는 다음과 같은 코드 조각을 접할 수 있습니다.

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

이 비밀스러운 선은 스타일 기반을 선택적으로 적용하는 강력한 CSS 기능인 미디어 쿼리를 나타냅니다. 특정 기준에 따라.

미디어 쿼리 해독

미디어 쿼리는 두 가지 구성 요소로 구성됩니다.

• 미디어 유형: 화면은 다음을 제외한 화면 기반 레이아웃에 스타일이 적용됨을 나타냅니다.
• 미디어 기능:(최대 너비: 1024px)은 브라우저 창 너비가 1024픽셀 이하인지 확인하는 테스트를 나타냅니다.

조건부 스타일 적용

CSS 코드 미디어 쿼리 내의 내용은 브라우저가 미디어 기능에 지정된 기준을 충족하는 경우에만 적용됩니다. 이 경우 img.bg의 스타일은 브라우저 창 너비가 최대 1024픽셀인 경우에만 적용됩니다.

미디어 쿼리의 목적

이 미디어 쿼리는 최대 너비가 1024픽셀인 장치 및 브라우저 창에 스타일 적용을 제한합니다. 이는 일반적으로 모바일 장치 및 작은 화면에 맞게 웹 사이트 요소의 레이아웃을 반응적으로 조정하는 데 사용됩니다.

img.bg의 left 및 margin-left 속성은 좁은 화면에서 이미지를 다르게 배치하여 이미지를 최적화하기 위한 것 같습니다. 소형 장치용 디스플레이.

추가 리소스

미디어 쿼리의 복잡성은 W3C 미디어 쿼리 사양을 참조하세요:

• https://www.w3.org/TR/css3-mediaqueries/

위 내용은 CSS 미디어 쿼리는 화면 크기에 따라 웹 사이트 레이아웃을 어떻게 반응적으로 조정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!