미디어 쿼리에서 "스크린"과 "전용 스크린"의 차이점은 무엇입니까?

미디어 쿼리 screen와 only screen미디어 쿼리 의 차이점은 무엇입니까 ?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

왜 사용해야 only screen합니까? 않습니다 screen자체가 렌더링 할 수있는 충분한 정보를 제공하지 만 화면을?

다음 세 가지 방법 중 하나를 사용하여 반응 형 웹 사이트를 많이 보았습니다.

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

예제를 하나씩 나누어 봅시다.

@media (max-width:632px)

이 max-width스타일을 적용하려는 632px 의 창 을 말합니다. 이 크기에서 대부분의 경우 데스크탑 화면보다 작은 것에 대해 이야기합니다.

@media screen and (max-width:632px)

이것은 a가있는 장치와 632px screen의 창 max-width에 스타일을 적용하는 것입니다. 사용 가능한 다른 매체 유형screen 과 달리 가장 일반적인 매체 유형 과 달리 지정한다는 점을 제외하면 위와 거의 동일합니다 print.

@media only screen and (max-width:632px)

여기에 W3C에서 인용 한 내용이 있습니다.

키워드 'only'를 사용하여 이전 사용자 에이전트에서 스타일 시트를 숨길 수도 있습니다. 사용자 에이전트는 'only'키워드가없는 것처럼 'only'로 시작하는 미디어 쿼리를 처리해야합니다.

"전용"과 같은 미디어 유형이 없으므로 스타일 시트는 이전 브라우저에서 무시해야합니다.

해당 페이지의 예 9에 표시된 해당 인용구에 대한 링크 는 다음과 같습니다 .

잘하면 이것은 미디어 쿼리에 약간의 빛을 발산합니다.

편집하다:

키워드가 실제로 어떻게 처리 되는지에 대한 @hybrids의 훌륭한 답변 을 확인하십시오 only.

다음은 Adobe 문서 에서 가져온 것 입니다.

미디어 쿼리 사양은 키워드를 제공하는데 only,이 키워드 는 이전 브라우저에서 미디어 쿼리를 숨길 수 있습니다. 마찬가지로 not키워드는 선언의 시작 부분에 와야합니다. 예를 들면 다음과 같습니다.

media="only screen and (min-width: 401px) and (max-width: 600px)"

미디어 쿼리를 인식하지 않는 브라우저는 미디어 유형의 쉼표로 구분 된 목록을 기대하고 사양은 말한다 해야 하이픈없는 최초의 영숫자가 아닌 문자 직전에 각 값을 자릅니다. 따라서 이전 브라우저 는 위의 예제를 다음과 같이 해석 해야 합니다.

media="only"

매체 유형 만 없기 때문에 스타일 시트는 무시됩니다. 마찬가지로 이전 브라우저 는 해석 해야 합니다.

media="screen and (min-width: 401px) and (max-width: 600px)"

같이

media="screen"

즉, 미디어 쿼리의 의미를 모르더라도 모든 화면 장치에 스타일 규칙을 적용해야합니다.

불행하게도 IE 6–8은 사양을 올바르게 구현하지 못했습니다.

모든 화면 장치에 스타일을 적용하는 대신 스타일 시트를 모두 무시합니다.

이 동작에도 불구하고, 덜 일반적인 다른 브라우저에서 스타일을 숨기려는 경우에만 미디어 쿼리 접두사를 사용하는 것이 좋습니다.

따라서

media="only screen and (min-width: 401px)"

과

media="screen and (min-width: 401px)"

IE6-8에서도 동일한 효과가 있습니다. 둘 다 해당 스타일을 사용하지 못하게합니다. 그러나 여전히 다운로드됩니다.

또한 CSS3 미디어 쿼리를 지원하는 브라우저에서 뷰포트 너비가 더 크고 401px미디어 유형이 화면 인 경우 두 버전 모두 스타일을로드합니다 .

CSS3 미디어 쿼리를 지원하지 않는 브라우저가 only버전 이 필요한지 확실하지 않습니다.

media="only screen and (min-width: 401px)" 

반대로

media="screen and (min-width: 401px)"

다음과 같이 해석되지 않도록

media="screen"

디바이스 랩에 액세스 할 수있는 사람에게는 좋은 테스트입니다.

화면이 더 작은 많은 스마트 폰에 스타일을 적용하려면 다음과 같이 쓸 수 있습니다.

@media screen and (max-width:480px) { … } 

구형 브라우저가 iPhone 또는 Android 전화 스타일 시트를 보지 못하게하려면 다음과 같이 작성할 수 있습니다.

@media only screen and (max-width: 480px;) { … } 

자세한 내용은이 기사를 참조 하십시오 http://webdesign.about.com/od/css3/a/css3-media-queries.htm

@hyitad의 답변은 @ashitaka가 언급 한 목적을 설명하지 않는 한 상당히 유익합니다. "모바일 우선 접근 방식을 사용하는 경우? 따라서 모바일 CSS를 먼저 사용하고 최소 너비를 사용하여 더 큰 사이트를 타겟팅합니다. 해당 문맥에서 유일한 키워드를 사용해서는 안됩니다. "

지원하지 않는 브라우저가 다른 장치 스타일을 "스크린"에서 시작하는 것처럼 사용하지 않도록 "단지"스타일로 시작하는 것처럼 화면에 걸리는 것을 목적으로 여기에 추가하고 싶습니다.

ashitaka에 대답하면이 예를 고려하십시오.

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

"만"을 사용하지 않으면 여전히 데스크톱 스타일이 눈에 띄는 안드로이드 스타일로 사용되지만 불필요한 오버 헤드가 발생하므로 여전히 작동합니다. 이 경우 브라우저가 지원하지 않으면 첫 번째 스타일 시트를 무시하고 두 번째 스타일 시트로 대체됩니다.

@media screen and (max-width:480px) { … } 

screen미디어 쿼리의 화면 크기를 설정합니다. 예를 들어 표시 영역의 최대 너비는 480 픽셀입니다. 사용 가능한 다른 매체 유형과 달리 화면을 지정합니다.

@media only screen and (max-width: 480px;) { … } 

only screen 미디어 기능이있는 미디어 쿼리를 지원하지 않는 이전 브라우저가 지정된 스타일을 적용하지 못하도록하는 데 사용됩니다.