CSS 미디어 쿼리가 실행되지 않음

나는 영구적 인 하나의 스타일 시트, 800px 이상의 윈도우 ("표준") 및 800px ("모바일")보다 작은 윈도우를위한 스타일 시트가 있습니다. 내 문제는 표준 스타일 시트가 인식 및 적용되고 있지만 800px 미만으로 창의 크기를 조정하면 모바일 시트가 무시되고 영구 스타일 만 남았습니다. 기본 구문 오류라고 생각되지만 문제를 찾을 수 없었습니다.CSS 미디어 쿼리가 실행되지 않음

<link rel="stylesheet" type="text/css" href="persistentstyle.css"> 
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" title="standard" href="style.css"> 
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" title="mobile" href="mobilestyle.css">

는 이미 헤더에 필요한 메타 태그가 :

<meta name="viewport" content="width=device-width" />

감사합니다!

<meta name="viewport" content="width=device-width">

This link 뷰포트 메타 설명 : 가장 일반적인 실수는 일을 CSS 미디어 쿼리에 필요한 메타 태그를 포함하지 않는, 일반적으로

<meta name="viewport" content="width=device-width">

출처

2013-09-02 Edward Chien

아마도 'mobilestyle.css' 파일에 대한 잘못된 링크일까요? – kirilloid

기본 CSS 파일 하단의 CSS 파일에 "인라인"미디어 쿼리를 추가하는 것이 가장 좋은 이유는 무엇입니까? 또는 분리하려는 경우 미디어 쿼리 코드를 각기 다른 크기의 개별 파일 상단에 놓습니다. – jamez14

미디어 쿼리가 괜찮은 것 같습니다. 몇 가지 디버깅 기술 : 1) 모바일 스타일 시트에서 오류를 확인하십시오. 2) 'style media = "화면과 (max-width : 799px)">'를 만들고 거기에있는 규칙 중 하나라도 작동하는지 확인하십시오. – BoltClock

는 this을 필요로 할 수 있음 태그 및 화면 배율을 허용하는 등의 속성을 지정할 수 있습니다.

출처

2013-09-02 20:23:46

- :

출처

2013-09-02 20:23:57 samrap

죄송합니다. 헤더에 메타 태그가 없다는 것을 잊어 버렸습니다. 나는 내 질문을 업데이트 할 것이다. –

CSS 미디어 쿼리가 실행되지 않음

답변

관련 문제