CSS 미디어 쿼리 부정

Question

나는 CSS 미디어 쿼리에이 조건을 변환하고 싶은

:

if(min-device-width != 768px && max-device-width != 1024px && max-width == 1200px) { 
    // apply CSS 
} 

편집 :

if((min-device-width != 768px && max-device-width != 1024px && max-width == 1200px) 
|| (min-device-width == 768px && max-device-width == 1024px && orientation == 'portrait')) { 
     // apply CSS 
} 

:

는 사실 내가이 상태에서 아이 패드를 대상으로 할 CSS가 어떤 장치이든 현재의 너비 인 경우 < 1200px 또는 Ipad (따라서 최소/최대 장치 너비)이고 세로 모드 인 경우 CSS를 적용해야합니다.

감사합니다.

Answer 1

@media screen (max-device-width: 1200px) and (orientation: portrait) { 
    // apply CSS 
} 

    @media screen and (min-width: 768px) , (max-width: 1024px), (orientation: portrait) { 
    ... 
} 

가 나는 1200px보다 해상도가 낮은 그리고 그 카테고리에 해당하기 때문에 당신이 완전히 max-device-width != 1024px와 부분을 건너 뛸 수 있다고 생각합니다. 그것은 모든 종류의 화면 크기를 목표로합니다.

이 질문은 min과 max을 동일한 쿼리에서 사용하는 방법에 대한 좋은 설명을 제공한다고 생각합니다. Example Question

1. AND (키워드)

는 지정된 모든 조건을 적용 할 스타일 규칙 전에 충족해야한다는 필요합니다.

@media 화면과 (최소 폭 : 700 픽셀)과 : 지정된 스타일 규칙이 제자리에 가지 않을

(방향을 가로) {...}하지 않는 한 참으로 평가하는 다음의 모든 :

미디어 유형이 '화면'이고 뷰포트의 너비가 700px 이상이고 화면 방향이 현재 가로 방향입니다. 참고 : 함께 사용하면이 세 가지 기능 쿼리가 단일 미디어 쿼리를 구성한다고 생각합니다.

2 OR (쉼표로 구분 된 목록)

오히려 또는 키워드보다 쉼표로 구분리스트는보다 복잡한 미디어 룰을

@media를 형성하기 위해 함께 여러 미디어 쿼리 체인에 사용되는 핸드 헬드 (최소 폭 :는 650), (방향 : 가로)는 {...}

지정된 스타일 규칙이 발효됩니다 한 번 어떤 하나 개의 미디어 쿼리가 참으로 평가 :

목 e 미디어 유형이 '핸드 헬드'이거나 뷰포트의 너비가 650px 이상이거나 입니다. 화면 방향이 현재 가로 방향입니다.

3. 아니하지 키워드가 하나의 미디어 쿼리 (그리고 전체 미디어 규칙을 부정하는 데 사용할 수 있습니다

(안 키워드) - 그것은 단지 쉼표 세트 사이에 항목을 부정한다는 것을 의미 @media 선언 다음의 전체 미디어 규칙이 아닙니다.).

마찬가지로, *가 미디어 쿼리 내에서 개별 기능 쿼리를 부정하는 데 사용할 수 없습니다 수 있으며,하지 키워드가 미디어 쿼리를 부정하는 것이

@media하지 화면을 기록하고 (최소 해상도 : 300DPI), (분 - 폭 : 800 픽셀) {...}

모두의 요구 사항 ('화면'각각 '300DPI'을 충족하지

용지 종류와 최소 해상도가 할 경우 발효됩니다 여기에 지정된 스타일) 또는 뷰포트의 너비가 적어도 800 픽셀입니다. 즉, 미디어 유형이 '화면'이고 최소 해상도가 300dpi 인 경우 뷰포트의 최소 너비가 최소 800 픽셀 이상이 아니면 규칙이 적용되지 않습니다.

합니다 (하지 키워드는 상태로 약간 펑키 수 있습니다 내가 더 잘 할 수 있는지 알려주세요,..)

4. ONLY (전용 키워드)

나는 그것의 알고있는 것처럼 only 키워드는 이전 브라우저가 이전에 사용 된보다 좁은 미디어 유형으로 최신 미디어 쿼리를 오해하지 않도록 방지하는 데 사용됩니다. 올바르게 사용하면 이전 버전/호환되지 않는 브라우저는 스타일을 완전히 무시해야합니다.

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

이 답변에서 복사하여 붙여 넣기. 자세한 내용을 보려면 다음을 읽어보십시오. THIS is the original answer.