미디어 쿼리 CSS 코드 사용 살펴보기

미디어 쿼리는 CSS3의 중요한 기능으로, 이를 통해 개발자는 다양한 장치 화면에 다양한 페이지 레이아웃과 스타일을 표시할 수 있습니다. 미디어 쿼리는 다양한 화면의 요구 사항을 충족하기 위해 다양한 기기에 따라 다양한 CSS 속성을 설정할 수 있습니다. 미래의 웹 디자인 및 개발에서는 미디어 쿼리가 점점 더 중요해질 것입니다. 이번 글에서는 미디어 쿼리 CSS 코드의 사용법을 살펴보겠습니다.

미디어 쿼리의 구문은 다음과 같습니다.

@media (media feature) {
    /*CSS styles*/
}

여기서 @media는 이것이 미디어 쿼리임을 브라우저에 알리고 미디어 기능은 미디어 쿼리에서 인식할 특정 조건을 나타내며 CSS 스타일은 적용된 CSS 스타일을 나타냅니다. 이 조건에 대해.

미디어 쿼리의 예는 다음과 같습니다.

@media (max-width: 600px) {
    body {
        background-color: red;
    }
}

위 코드에서는 기기의 너비가 600px 이하인 경우 빨간색 배경색을 사용한다는 의미입니다.

미디어 쿼리에서는 다양한 미디어 기능을 사용할 수 있습니다. 일반적으로 사용되는 미디어 기능은 다음과 같습니다.

• width: 터미널 너비를 지정합니다.
• height: 터미널의 높이를 지정합니다.
• device-width: 터미널 화면의 너비를 지정합니다.
• device-height: 터미널 화면의 높이를 지정합니다.
• 방향: 장치 방향이 가로인지 세로인지 지정합니다.
• aspect-ratio: 터미널 화면의 화면 비율을 지정합니다.
• 해상도: 터미널 화면 등의 해상도를 지정합니다.

미디어 쿼리는 단일 조건의 판단을 지원할 뿐만 아니라 여러 조건의 판단도 허용합니다. 예:

@media (max-width: 480px) and (orientation: portrait) {
    body {
        background-color: yellow;
    }
}

위 코드는 장치의 너비가 480px보다 작거나 같을 때를 나타냅니다. 장치 방향이 세로 방향이면 노란색을 배경색으로 사용하세요.

미디어 쿼리도 있습니다. 쿼리가 아닙니다. not 쿼리는 특정 조건을 제외하고 다른 모든 조건이 판단을 만족함을 나타냅니다. 예:

@media not (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

위 코드는 장치의 너비가 768px 미만일 때 글꼴 크기가 16px임을 의미합니다.

실제 개발에서는 쉼표를 사용하여 다양한 미디어 쿼리를 결합하여 다양한 장치에 대해 다양한 CSS 속성을 설정할 수도 있습니다. 예:

@media (min-width: 768px), handheld and (orientation: landscape) {
    body {
        font-size: 20px;
    }
}

위 코드는 장치의 너비가 768px 이상이거나 휴대용 장치가 가로 모드에서 사용될 때 글꼴 크기가 20px임을 의미합니다.

요약하자면 미디어 쿼리는 CSS3의 중요한 기능 중 하나입니다. 기기 화면의 특성에 따라 다양한 기기에 대한 CSS 속성을 설정하여 다양한 레이아웃과 스타일을 구현할 수 있습니다. 실제 개발에서는 다양한 미디어 기능을 사용하여 미디어 쿼리를 결합하여 더 나은 결과를 얻을 수 있습니다.

위 내용은 미디어 쿼리 CSS 코드 사용 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!