왜 @ @ 미디어 쿼리가 작동하지 않습니까?

나는 현재 작동하지 않습니다 ... 내 웹 사이트가 서로 다른 크기의 모양을 변경할 수 media queries를 사용하는 것을 시도하고있다 :왜 @ @ 미디어 쿼리가 작동하지 않습니까?

html {background:#333;} 
 
body {background:#F0F1F2;} 
 
html, body { 
 
    width:100%; 
 
    min-height:100%; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
    font-family:'bl-reg', sans-serif; 
 
    font-size:12px; 
 
    color:#333; 
 

 
    z-index:inherit; 
 
} 
 
h1, h2, h3, h4, h5, h6, p, a, li, tr, th, td { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor:default; 
 
} 
 
a { 
 
    font-family:'bl-reg', sans-serif; 
 
    font-weight:inherit; 
 
    font-size:inherit; 
 
    text-decoration:none; 
 
    color:inherit; 
 
    cursor:pointer; 
 
} 
 
a:hover { 
 
    text-decoration:underline; 
 
} 
 
.margin-center { 
 
    margin:auto auto; 
 
} 
 
.pull-left { 
 
    float:left; 
 
} 
 
.pull-right { 
 
    float:right; 
 
} 
 

 
div.navbar { 
 
    height:48px; 
 
    overflow:auto; 
 
    background:#FFF; 
 
} 
 
div.navbar > ul { 
 
    list-style-type:none; 
 
} 
 
div.navbar > ul li.brand, 
 
div.navbar ul li.link { 
 
    display:inline-block; \t 
 
} 
 
div.navbar > ul li.brand { 
 
    font-weight:bold; 
 
    font-size:14px; 
 
} 
 
div.navbar ul li.link { 
 
    font-size:12px; 
 
} 
 
div.navbar > ul li a { 
 
    display:block; 
 
    padding:15px; 
 
} 
 
div.navbar > ul li.link a { 
 
    display:block; 
 
    padding:16.5px 15px; 
 
    color:rgba(51,51,51,0.75); 
 
} 
 
div.navbar > ul li.link a:hover { 
 
    color:rgba(51,51,51,1); \t 
 
} 
 
div.navbar > ul li a:hover { 
 
    text-decoration:none; 
 
} 
 
} 
 
@media screen and (min-width: 975px) { 
 
    div.navbar > ul { 
 
    width:975px; 
 
    } 
 
} 
 
@media screen and (max-width: 974px) { 
 
    div.navbar > ul { 
 
    width:100%; 
 
    } 
 
    div.navbar > ul > div.collapse { 
 
    position:absolute; 
 
    margin-top:48px; 
 
    } 
 
}

<html> 
 
    <head> 
 
    <title>Welcome</title> 
 
    <link rel="stylesheet" type="text/css" href="./default.css" /> 
 
    <link rel="stylesheet" type="text/css" href="./fonts.css" /> 
 
    <script src="./jquery-1.11.1.min.js"></script> 
 
    <script src="./global.js"></script> \t 
 
    </head> 
 

 
    <body style="display:none;"> 
 
    <div class="navbar"> 
 
     <ul class="margin-center"> 
 
     <li class="brand pull-left"> 
 
      <a href="#">stack</a> 
 
     </li> 
 
     <div class="collapse"> 
 
      <li class="link"> 
 
      <a href="#">Hello</a> 
 
      </li> 
 
      <li class="link"> 
 
      <a href="#">Hello</a> 
 
      </li> 
 
      <li class="link"> 
 
      <a href="#">Hello</a> 
 
      </li> 
 
      <li class="link pull-right"> 
 
      <a href="#">World</a> 
 
      </li> 
 
     </div> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

왜 내 브라우저로 웹 사이트를 개방하지 않습니다 너비가 975px보다 큰 경우 width을 div.navbar > ul 등과 같게 만듭니다. 그리고이 작은 975px 힘보다 max-width: 974px

출처

2014-11-05 zxc

이 navbar가 포함 된 HTML 스 니펫과 테스트 할 브라우저와 같은 관련 정보를 추가하십시오. 또한 편집기에서 'Code snippet'버튼을 보았습니까? 그것을 시도하는 것이 정말 도움이됩니다! – GolezTrol

@GolezTrol - 업데이트 됨, 아니요 - 아직 코드 스 니펫 버튼을 보지 못했습니다 ^^; 최근에는 stackoverflow에서만 인기가있는 것으로 보입니다. – zxc

현재 : 마크 업이 잘못되었습니다. 'ul'는'div'가 아니라'li' 만 포함 할 수 있습니다. – Abhitalks

내 100%에 width 다른 일을해야합니다 때 당신이 선언 당신의 HTML 5를 사용하고 뷰포트 메타 태그를 가지고있다.

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
    </head> 
    <body> 
    <p>jargin</p> 
    </body> 
    </html>

출처

2014-11-05 11:22:17 Bradley

안녕하세요, 메타 태그를 추가했습니다. 'position : absolute'와'margin-top'은 작동하지만,'width'는 작동하지 않습니다. – zxc

본문에 디스플레이를 사용하고 있습니까? 실수로 사용하는 경우 HTML 코드에서 삭제하십시오. 모든

출처

2014-11-05 11:36:09 Gajen

먼저 당신이 몸에 display:none을 적용 <!DOCTYPE html>

누락, 크기를 조정 (미디어 내가 바이올린을 업데이트 한

@media screen and (max-width: 974px) { 

    html { 
     background:yellow; 
    } 

}

CSS 쿼리 그것을

를 제거하십시오 미디어 쿼리를 적용하는 창)

http://jsfiddle.net/kbdvm5j6/12/

출처

2014-11-05 12:38:24

왜 @ @ 미디어 쿼리가 작동하지 않습니까?

답변

관련 문제