CSS 미디어 쿼리 최소 폭은 제대로

나는 같은 HTML이 :CSS 미디어 쿼리 최소 폭은 제대로

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Code: NewYork</title> 
    <link rel="stylesheet" href="test.css" /> 
</head> 
<body data-ng-app="us"> 
    <input type="text" /> 
</body> 
</html>

을 내 CSS는 다음과 같습니다 윈도우가 909px 폭에있을 때

input { 
    background-color: red; 
} 
/* ---- Desktop */ 
@media only screen and (min-width: 1000px) and (max-width: 1200px) { 
    input { 
     background-color: green; 
    } 
}

이제 CSS가 적용됩니다. 분명히 스크롤바 문제가 아닙니다. 나는이 간단한 문제로 열매를 맺고있다. Chrome과 IE10에서 동일한 테스트를 거쳤습니다.

아무도 내가 여기서 잘못하고있는 것을 도울 수 있습니까?

나는이 HTML 사용

출처

2013-05-21 Tuan

이 같은 간단한 미디어 쿼리 선언으로

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Code: NewYork</title> 
</head> 
<body data-ng-app="us"> 
    <input type="text" /> 
</body> 
</html>

을 : http://jsbin.com/ubehoy/1

디버깅 Firefox Responsive Design View로하고, 크기 변경을 끌어 :

@media (min-width: 1000px) and (max-width: 1200px) { 

input { 
     background-color: green; 
    } 

}

그것은 큰 여기 일하고있어 너비 제한에 도달하면 입력 배경색을 올바르게 변경합니다.

Chrome 26.0.1410.64 m/IE 10을 사용해 보았는데 너무 효과적입니다.

출처

2013-05-21 23:32:34

이상한 이유로 화면이 1000 픽셀이지만 크롬이 900 픽셀을 측정합니다. html과 css는 완전히 동일하지만. 나는 너비가 동일하다는 것을 확인하기 위해 두 개의 문서를 두 개의 탭에 넣은 창을 열었다. 내 로컬 문서에서 크롬 측정 값 900px :( – Tuan

+33

젠장, 바보 같았습니다.이 탭은 줌 레벨에서 보냈습니다. -_- 나는 늦게까지 일해야합니다 ... 감사합니다 ... – Tuan

: D ... 이것은 어려운 일입니다. 봐, 정말! –

@media (min-width: 1000px) and (max-width: 1200px) { 

input { 
     background-color: green; 
    } 

}

이 방법이 효과적이지만 확대/축소를 확인하십시오. (나는이 대답을이 주변에서 발견 했으므로이 대답을 알아 냈다. 나는 이것도 잊어 버렸다.)

출처

2016-10-21 14:14:51 Victor

나는 때때로 이런 일이 일어났다. 탭이 확대되어 있지 않은지 확인하십시오. (⌘0)

출처

2017-05-30 17:36:25

CSS 미디어 쿼리 최소 폭은 제대로

답변

관련 문제