CSS3 미디어 쿼리가 작동하지 않습니다.

내 웹 사이트에서 다음과 같은 미디어 쿼리를 사용하고 있습니다.CSS3 미디어 쿼리가 작동하지 않습니다.

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1025px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

여기서 의도하는 것은 다른 장치에 대한 다른 스타일 시트를 사용하는 것이 었습니다. (지금은 데스크톱과 ipad 만 지원하고 싶습니다.)

Firefox (버전 8) 또는 Chrome (버전 : 15.0.874.106)을 사용하여 내 웹 사이트에 웹 사이트를로드하면 CSS 파일 (web.css 및 ipad.css)이 모두 다운로드됩니다.

내 코드가 무엇이 잘못되었는지 잘 모르겠습니다. 누군가가 이것으로 나를 도울 수 있습니까?

는

출처

2011-11-10 Sivakumar

IT는 작동하지만 숫자 값을 변경하지 있습니다 사용을 지원

<link rel="stylesheet" href="web.css" media="only screen and (min-width : 1025px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

출처

2011-11-10 11:51:15 Kyle

을 는 유감스럽게도 표시해야하는 것과 상관없이 모든 스타일 시트를 다운로드합니다.

이 쿼리는 장치가 아닌 해상도를 기반으로 두 가지 레이아웃 핸들을 제공하지만 두 스타일 시트는 항상 다운로드됩니다.

media="screen and (min-width: 768px) and (max-width: 1024px)" 
media="screen and (min-width: 1025px)"

출처

2011-11-10 11:59:51 sandeep

여기서 문제는 두 개의 CSS 파일 모두를 다운로드하는 것입니다. 데스크탑과 viceversa에서 ipad.css를 다운로드해서는 안됩니다. 내 가정이 틀렸어? – Sivakumar

min-width는 페이지의 화면 크기를 참조하기 때문에 & css 파일을 다운로드하지 않습니다. & min-device-width는 iphone 및 ipad와 같은 기기에서 열려있을 때 활성화됨을 의미합니다. – sandeep

http : // css-tricks .com/6206 - 해상도 관련 스타일 시트 / – sandeep

브라우저 :이 같은 min-width 대신 min-device-with를 작성해야 Desktop에 대한

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1024px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1023px)"

출처

2012-05-01 14:58:57 amigolargo

CSS3 미디어 쿼리가 작동하지 않습니다.

답변

관련 문제