2014-04-17 2 views
3

응답 성있는 웹 사이트에서 작업하고 있습니다 (두 번째). 최근에 문제를 만났습니다. 사실 내 미디어 쿼리 중단 점은 모두 정상적으로 작동하지만, 에 있습니다. 예를 들어 잘못된 값 (예상보다 135px 이하로) :미디어 잘못된 값으로 중단 점을 쿼리합니다.

.portfolio { 
    display: inline-block; 
    height: 400px; 
} 
.portfolio-item-container { 
    float: left; 
    height: 50%; 
    overflow: hidden; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
@media screen and (min-width:320px) { 
    .portfolio { 
     width: 638px; 
    } 
    .portfolio-item-container { 
     width: 33%; 
    } 
} 
@media screen and (min-width:1350px) { 
    .portfolio { 
     width: 850px; 
    } 
    .portfolio-item-container { 
     width: 25%; 
    } 
} 

이 짧은 코드가 내있는 style.css 파일에서 가져옵니다, 웹 사이트는 워드 프레스 템플릿 내가 크롬을 사용합니다. 예를 들어,이 경우 중단 점은 쓰여진대로 1350px 대신 1215px입니다. 나는 그것이 스크롤바 때문이라고 생각했으나 그것을 제거하고 아무 것도 변하지 않았다 ... 그런 다음, 나는 몇 단어 (min-width 대신 min-device-width 등)를 시도했다. IE와 동일한 문제 (Mozilla에서 확인하지 못함). 내 리셋 CSS를 확인했습니다. 정상 버전의 최신 버전을 가지고 있습니다 ...

이전에 이미 미디어 쿼리 구조를 사용했는데 아주 잘 작동했는데 업데이트에서 올 수 있었습니까? 나는 더 이상 어디서 볼지 모르겠다. 아무도 아이디어를 가지고 있지 않겠는가?

는, 사전에

+2

이상한 문제가 있습니다. 브라우저 화면이 전혀 확대되어 있습니까? 또한, px를 em으로 전환해도 여전히 동일한 문제가 발생합니까? – Meg

+0

정확히 똑같은 문제가 있었는데 90 %가 확대되었습니다. –

답변

1

루이 감사 당신은 확인 : 페이지의 head에서

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

합니다.

+0

빠른 답변 주셔서 감사합니다. 예, 실제로 이미 있습니다 ... 또 다른 아이디어가 있습니까? – Loheek

관련 문제