미디어 쿼리 + 브라우저 줌

미디어 쿼리 및 브라우저 확대/축소와 관련해서는 매우 이상한 문제가 발생했습니다.미디어 쿼리 + 브라우저 줌

Chrome 52.0.2743.116 m을 사용하고 있습니다.

문제는 이것이다 :, 순간 어디있을 것 같습니다 : 당신이 125 %에 브라우저 줌을 사용하여 확대 및 태블릿이 (가 1024px 최대 폭) 킥 가정 될 때까지 브라우저의 크기를 조정

max-width : 1024px 또는 min-width : 1025px도 참이 아닙니다.

최대 너비 : 1024.9px로 변경하면 작동합니다.

<div class="box"> 
    Text 
</div> 
<div class="box"> 
    Text 
</div> 
<div class="box"> 
    Text 
</div>

그리고 CSS :

이

@media (max-width:768px) { 
    .box { 
     background: blue; 
    } 
} 

@media (min-width: 769px) and (max-width: 1024px) { 
    .box { 
     background: red; 
    } 
} 

@media (min-width:1025px) { 
    .box { 
     background: green; 
    } 
}

예 :이 빨간색으로 바뀔 때까지 125 %의 http://codepen.io/tomusborne/pen/EyrNvG

줌, 다음 아래로 크기를 조정

여기에 빠른 예입니다. 픽셀 단위로 크기를 조정하면 태블릿과 데스크톱 사이의 한 픽셀에 배경색이 전혀 없음을 알 수 있습니다.

누구에게 무슨 일이 일어나고 있는지 알고 계십니까? 괜찮은 솔루션 1024.9px를 사용하고 있습니까? 나는 미쳐 가고 있니? <html> 요소를 검사

출처

2016-08-16 Tom Usborne

크롬에 문제를 재현 할 수 없습니다/Win7. 또한 미디어 규칙을 단순화하고 우선 적용 작업을 수행 할 수 있습니다. -> https://jsfiddle.net/azizn/uhsjf4p7/ – Aziz

대답을 원하는 분야

그래서 페이지 너비가 실제로가 1024px보다 크고 1025px보다 작습니다.

min-width과 max-width에 모두 동일한 값을 사용하는 것이 좋습니다.
간격이없는 모든 너비를 포함하며 충돌이있는 경우 (즉, 페이지가 , 정확히24px 인 경우) 문서의 뒷부분에 표시되는 규칙이 우선 적용됩니다.

출처

2016-08-16 17:46:28 Siguza

그게 효과가 있습니다. 이상한 일이 좀 더 일반적인 구현 방법이 아닌지 - 나는 수 주 동안 이것을 조사해 왔으며 아무도 이런 종류의 행동을 언급하지 않았다. 귀하의 답변 주셔서 감사합니다! –

최소 또는 최대를 사용할 필요가 없습니다. 당신이 어떤 고정 폭 어떤 CSS를 적용 할 경우, 당신은 ... 아래와 같은 @media 만 스크린과 미디어 쿼리를 사용할 수 있습니다 (폭 :가 1024px) { /* Your Styles */ }

출처

2017-07-27 10:16:50

미디어 쿼리 + 브라우저 줌

답변

관련 문제