미디어 쿼리 not 연산자

Question

Gidday

내가 정확히 321px입니다 화면을 660px 고해상도의 이미지로 화면을 제공 미디어 쿼리을 알아 내려고 노력하고 있지만했습니다.

이 목적은 321px 뷰포트의 일반적인 저해상도 이미지가있는 데스크톱/랩톱 등의 데스크톱 응용 프로그램을 제공하는 반면 660 미만 (321px 뷰포트 제외)의 이미지는 고해상도 이미지를 얻는 것입니다.

이 두 가지 쿼리를 사용하여 작동하지만 320px 뷰포트가 두 이미지를 모두 요청하고 있습니다. 나는 게으른하고 내가 현명 표시 원하는 것을 달성으로 그대로두고 있지만, 불필요한 대역폭을 먹고 수 :

@media all and (min-width:661px){ //serves high res image to iphones etc (good), but also my 321px desktop app viewport (bad) 

다음에 ... 내가 함께 놀았 던

@media all and (min-width: 661px), all and (width:321px) { //serves low res image to desktops (good) and my 321px desktop app viewport (good) 

을 하지만 첫 번째 쿼리에서 not 연산자는, 예를 들어

all and (min-width:661px) and not (width:321px) 

을 금 없습니다 ...하지만 이동하지 않았습니다. 내가 말할 수있는 첫 번째 쿼리를 변경 어떻게 그래서

...

가 660px에서 모두 허용하지만 321px은 정확히 그 중 하나를 무시?

감사합니다.

Answer 1

다음은 몇 가지 미디어 쿼리입니다. 마지막 하나는 당신이 찾고있는 것입니다. 320px와 322px 사이의 값이면 몸의 배경이 검은 색으로 표시됩니다. 321px로만 표시하는 것만 큼. 희망이 도움이!

@media only screen and (max-width: 660px) { body {background:red;} } 

@media only screen and (min-width : 320px) and (max-width : 322px) {body{background:#000;}} 

Answer 2

신경 끄시는 - 내가 사용하지 않고 금이 생각 - 여기있다 ...

@media all and (min-width: 322px) and (max-width: 660px), (max-width: 320px) { //hi res image for all screens 660px and below, excluding those exactly 321px 

은 ... 다음에 ...

@media all and (min-width: 661px), all and (width:321px) { //low res image for all screens above 660px, plus those exactly 321px 

은 내가 원하는 방법을 작동하는 것 같군 .