CSS 미디어 쿼리 및 논리 연산자 : 간단한 개요;)

빠른 답변.

쉼표로 규칙을 구분하십시오.
@media handheld, (min-width: 650px), (orientation: landscape) { ... }

긴 대답입니다.

여기에는 많은 것이 있지만 무성한 글쓰기뿐만 아니라 정보를 조밀하게 만들려고했습니다. 나 자신을 배울 수있는 좋은 기회였습니다! 그래도 체계적으로 읽는 데 시간이 걸리면 도움이되기를 바랍니다.

미디어 쿼리

미디어 쿼리는 기본적으로 웹 디자인에서 장치 또는 상황 별 브라우징 경험을 만들기 위해 사용됩니다. 이것은 @media페이지의 CSS 내 선언을 사용하여 수행됩니다 . 가로 세로 비율이 다른 태블릿 또는 TV, 장치의 색상 또는 흑백 화면 또는 가장 빈번한 경우에 따라 웹 페이지를 다르게 표시하는 데 사용할 수 있습니다. 사용자는 브라우저 크기를 변경하거나 다양한 화면 크기를 가진 탐색 장치 간을 전환합니다 (대개 말하면 이와 같은 디자인 을 반응 형 웹 디자인 이라고 함 )

논리 연산자

이러한 상황을 설계 할 때 다양한 장치 또는 뷰포트 크기를 대상으로 할 때 더 복잡한 요구 사항 조합을 요구하는 데 사용할 수 있는 4 개의 논리 연산자 가 있습니다 .

(참고 : 미디어 규칙, 미디어 쿼리 및 기능 쿼리의 차이점을 이해하지 못하는 경우이 답변의 맨 아래 섹션을 먼저 탐색하여 미디어 쿼리 구문과 관련된 용어를 조금 더 잘 이해하십시오.

1. AND ( 및 키워드)

것을 요구 지정된 모든 조건이 충족되어야 적용됩니다 스타일링 규칙 전에.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

지정된 스타일 규칙은 다음 모두 가 true로 평가 되지 않으면 적용되지 않습니다 .

• 미디어 유형은 ‘스크린’ 이며
• 뷰포트는 너비가 700 픽셀 이상 이고
• 화면 방향은 현재 가로입니다.

참고 :이 세 가지 기능 쿼리를 함께 사용 하면 단일 미디어 쿼리를 구성 한다고 생각 합니다 .

2. 또는 ( 쉼표로 구분 된 목록 )

쉼표로 구분 된 목록은 키워드 또는 키워드 대신 여러 미디어 쿼리를 연결하여보다 복잡한 미디어 규칙을 형성하는 데 사용됩니다

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

하나의 미디어 쿼리가 true로 평가 되면 지정된 스타일 규칙이 적용됩니다 .

1. 미디어 유형이 ‘핸드 헬드’ 이거나
2. 뷰포트의 너비가 650 픽셀 이상 이거나
3. 화면 방향은 현재 가로입니다.

3. NOT ( 하지 키워드)

하지 키워드가 될 수있다 하나의 부정 사용하는 미디어 쿼리를 (그리고 전체 미디어를 지배 단지 전체 용지가 @media 선언 다음 규칙 쉼표의 세트와하지 사이에 항목을 부정하는 것이 –meaning).

마찬가지로, 참고 것을 하지 키워드을 Negate 미디어 쿼리, 할 수없는 미디어 쿼리 내에서 개별 기능 쿼리를 부정하는 데 사용. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

여기에 지정된 스타일은 다음과 같은 경우에 적용됩니다.

1. 미디어 유형 및 최소 해상도 가 요구 사항 (각각 ‘스크린’및 ‘300dpi’)을 충족 하지 않거나
2. 뷰포트의 너비는 800 픽셀 이상입니다.

즉, 미디어 유형이 ‘screen’이고 최소 해상도가 300dpi 인 경우 뷰포트의 최소 너비가 800 픽셀 이상이 아니면 규칙이 적용되지 않습니다 .

(not 키워드는 상태가 약간 펑키 할 수 있습니다. 더 잘 할 수 있는지 알려주세요.;)

4. 전용 ( 키워드 만 )

알다시피, 유일한 키워드는 이전 브라우저 가 이전에 사용 된 더 좁은 미디어 유형으로 최신 미디어 쿼리를 잘못 해석하는 것을 방지하는 데 사용됩니다 . 올바르게 사용되는 구형 / 비준수 브라우저는 스타일을 완전히 무시해야합니다.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

그것은 읽을 것 같은 나이 / 비 호환 브라우저는, 내가 믿는 모두 코드 행을 무시합니다 에만 키워드를 그리고 잘못된 미디어 고려 유형 . ( 더 똑똑한 사람들의 자세한 정보는 여기 와 여기 를 참조 하십시오 )

더 많은 정보를 위해서

더 많은 정보 (문의 할 수있는 더 많은 기능 포함)는 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators를 참조하십시오.

미디어 쿼리 용어 이해

참고 : 특히 not 키워드 와 관련하여 여기에있는 모든 의미를 이해하려면 다음 용어를 배워야했습니다 . 내가 이해 한대로 여기있다 :

미디어 규칙 (MDN 이러한 미디어 문을 호출하는 것)라는 용어가 포함 @media는 다음의 미디어 쿼리의 모든과를

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

미디어 쿼리 기능 쿼리의 집합입니다. 기능 쿼리 하나처럼 간단하거나 and 키워드를 사용하여 보다 복잡한 쿼리를 구성 할 수 있습니다 . 보다 복잡한 미디어 규칙을 형성하기 위해 미디어 쿼리를 쉼표로 구분할 수 있습니다 ( 위 또는 키워드 참조).

screen (참고 : 여기서는 하나의 기능 쿼리 만 사용됩니다.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

아닙니다 handheld, (min-width: 650px). (쉼표에 유의하십시오. 여기에는 두 개의 미디어 쿼리가 있습니다.)

기능 쿼리는 룰이 미디어의 가장 기본적인 부분이며, 단순히 주어진 기능과 주어진 검색 상황에서의 상태에 관한 것이다.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

코드 스 니펫 및 정보 :

CSS 미디어 쿼리 에 의해 모질라 참여자가 (에 따라 사용이 허가 CC-BY-SA 2.5 ). 설명의 명확성을 높이기 위해 일부 코드 샘플을 약간 변경하여 사용했습니다.

답변

@media only screen
and (min-width : 415px){
    /* Styles */
}

@media only screen
and (min-width : 769px){
    /* Styles */
}

@media only screen
and (min-width : 992px){
    /* Styles */
}

@media only screen
and (max-width : 991px){
    /* Styles */
}

@media only screen
and (max-width : 768px){
    /* Styles */
}

@media only screen
and (max-width : 414px){
    /* Styles */
}