CSS Media Query가로드되지 않음

Question

정적 웹 사이트를 작성하고 로컬로 테스트하고 있습니다. 나는 미디어 쿼리를 작성하여 레이아웃을 약간 변경하여 스마트 폰을 살펴 보는 것이 훨씬 낫다. 미디어 쿼리를 통해 내 목표는 텍스트와 프로필 사진을 나란히 놓고 하나씩 차례로 변경하는 것입니다.

내 문제는 크롬이나 Firefox에서 HTML 파일을로드하고 창 크기를 조정할 때 레이아웃이 변경되지 않고 수정 방법을 알 수 없다는 것입니다. 어떤 도움이라도 대단히 감사 할 것입니다. 아래에서 내 코드를 찾으십시오. 내 표준 CSS를 들어

나는이 (작은 조각)이 있습니다

#about-text { 
    /*A div containing paragraphs and a table*/ 
    display: inline-block; 
    width: 50%; 
} 

#profile-photo { 
    /*An img tag after the closing about-text div*/ 
    border: 4px solid #1abc9c; 
    display: inline; 
    float: right; 
    margin: 8% 0% 0% 0%; 
    max-width: 40%; 
} 

그리고 나는 미디어 쿼리와 해당 CSS가 : 어쩌면

@media (min-device-width : 320px) and (max-device-width : 480px) { 

#about-text { 
    /*A div containing paragraphs and a table*/ 
    display: block; 
    width: 50%; 
} 

#profile-photo { 
    /*An img tag after the closing about-text div*/ 
    border: 4px solid #1abc9c; 
    display: block; 
    float: right; 
    margin: 8% 0% 0% 0%; 
    max-width: 40%; 
} 
} 

Answer 1

사용자는 장치의 화면 크기 만 고려하여 min-device-width 및 max-device-width를 사용하고 있습니다. 최소 너비와 최대 너비를 사용하면 크기를 조정할 때 브라우저에서 작동합니다.

예 :

.testDiv { 
    color: green; 
} 

@media (min-width : 320px) and (max-width : 480px) { 
    .testDiv { 
     color: red; 
    } 
} 

http://jsfiddle.net/ZUPD2/

Answer 2

를 더 닫는 대괄호가 없기 때문에 미디어 쿼리 블록?