답변:
쉼표를 사용하여 두 개 이상의 다른 규칙을 지정하십시오.
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
에서 https://developer.mozilla.org/en/CSS/Media_queries/
또한 여러 미디어 쿼리를 쉼표로 구분 된 목록으로 결합 할 수 있습니다. 목록의 미디어 쿼리 중 하나라도 true이면 관련 스타일 시트가 적용됩니다. 이는 논리적 "또는"작업과 같습니다.
빠른 답변.
쉼표로 규칙을 구분하십시오.
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
긴 대답입니다.
여기에는 많은 것이 있지만 무성한 글쓰기뿐만 아니라 정보를 조밀하게 만들려고했습니다. 나 자신을 배울 수있는 좋은 기회였습니다! 그래도 체계적으로 읽는 데 시간이 걸리면 도움이되기를 바랍니다.
미디어 쿼리는 기본적으로 웹 디자인에서 장치 또는 상황 별 브라우징 경험을 만들기 위해 사용됩니다. 이것은 @media페이지의 CSS 내 선언을 사용하여 수행됩니다 . 가로 세로 비율이 다른 태블릿 또는 TV, 장치의 색상 또는 흑백 화면 또는 가장 빈번한 경우에 따라 웹 페이지를 다르게 표시하는 데 사용할 수 있습니다. 사용자는 브라우저 크기를 변경하거나 다양한 화면 크기를 가진 탐색 장치 간을 전환합니다 (대개 말하면 이와 같은 디자인 을 반응 형 웹 디자인 이라고 함 )
이러한 상황을 설계 할 때 다양한 장치 또는 뷰포트 크기를 대상으로 할 때 더 복잡한 요구 사항 조합을 요구하는 데 사용할 수 있는 4 개의 논리 연산자 가 있습니다 .
(참고 : 미디어 규칙, 미디어 쿼리 및 기능 쿼리의 차이점을 이해하지 못하는 경우이 답변의 맨 아래 섹션을 먼저 탐색하여 미디어 쿼리 구문과 관련된 용어를 조금 더 잘 이해하십시오.
1. AND ( 및 키워드)
것을 요구 지정된 모든 조건이 충족되어야 적용됩니다 스타일링 규칙 전에.
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
지정된 스타일 규칙은 다음 모두 가 true로 평가 되지 않으면 적용되지 않습니다 .
참고 :이 세 가지 기능 쿼리를 함께 사용 하면 단일 미디어 쿼리를 구성 한다고 생각 합니다 .
2. 또는 ( 쉼표로 구분 된 목록 )
쉼표로 구분 된 목록은 키워드 또는 키워드 대신 여러 미디어 쿼리를 연결하여보다 복잡한 미디어 규칙을 형성하는 데 사용됩니다
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
하나의 미디어 쿼리가 true로 평가 되면 지정된 스타일 규칙이 적용됩니다 .
3. NOT ( 하지 키워드)
하지 키워드가 될 수있다 하나의 부정 사용하는 미디어 쿼리를 (그리고 전체 미디어를 지배 단지 전체 용지가 @media 선언 다음 규칙 쉼표의 세트와하지 사이에 항목을 부정하는 것이 --meaning).
마찬가지로, 참고 것을 하지 키워드을 Negate 미디어 쿼리, 할 수없는 미디어 쿼리 내에서 개별 기능 쿼리를 부정하는 데 사용. *
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
여기에 지정된 스타일은 다음과 같은 경우에 적용됩니다.
즉, 미디어 유형이 '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 ). 설명의 명확성을 높이기 위해 일부 코드 샘플을 약간 변경하여 사용했습니다.
CSS에서 적절한 미디어 쿼리를 작성하는 방법에는 두 가지가 있습니다. 더 큰 장치에서 먼저 미디어 쿼리를 작성하는 경우 올바른 작성 방법은 다음과 같습니다.
@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 */
}