CSS에서 `@media screen and (max-width: 1024px)`는 무엇을 합니까?

CSS의 @media 화면 및 (최대 너비: 1024px) 이해

익숙한 CSS 코드를 접하면 당황스러울 수 있습니다. 최근에는 개발자가 다음과 같은 수수께끼의 줄이 포함된 코드를 상속받았습니다.

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

이 수수께끼의 줄을 해독하기 위해 미디어 쿼리의 중요성을 자세히 살펴보겠습니다.

예: 코드에 제시된 것은 특정 기준에 따라 조건부로 스타일 규칙을 적용하는 데 사용됩니다. 이 경우 테스트되는 기준은 다음과 같습니다.

1. @media screen: 이렇게 하면 CSS 규칙이 데스크톱 수준 브라우저로 식별된 장치에만 적용됩니다.

2. (최대 너비: 1024px): 이 조건은 CSS 규칙의 적용을 브라우저 창 너비(스크롤 막대 포함)가 1024픽셀 이하인 장치로 제한합니다.

이러한 기준에 따라 CSS는 중괄호 안에 포함된 규칙은 두 조건을 모두 충족하는 장치에만 적용됩니다. 이는 주로 iPad와 같은 장치로 스타일을 제한하는 것을 목표로 합니다. iPhone.

그러나 너비가 1024픽셀 미만인 데스크톱 브라우저 창은 최대 너비 미디어 쿼리를 지원하는 브라우저의 CSS 스타일도 상속한다는 점에 유의하는 것이 중요합니다.

추가 정보 자세한 내용은 http://www.w3.org/TR/css3-mediaqueries/

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