이미지 맵이있는 미디어 쿼리

이 미디어 쿼리가 작동하지 않는 이유는 무엇입니까? 화면 너비가 1300 픽셀보다 큰 경우 이미지 맵의 상단 150 픽셀을 잘라내려고합니다. 이미지 맵은 반응이 좋으며 브라우저의 너비를 확장합니다 (그 부분은 잘 작동합니다).이미지 맵이있는 미디어 쿼리

<style> 
body { 
    font-family: Helvetica, Arial, sans-serif; 
    background-color:#cfa88a; 
    margin-top: 0px; 
} 
img[usemap] { 
    border: none; 
    height: auto; 
    width: 100%; 
} 
/* on big wide screens over 1300px */ 
@media all and (min-width: 1300px) { 
    #picmap:{margin-top:-150px;} 
} 
</style> 
</head> 
<body> 
    <img src="lauout.jpg" id="picmap" alt="" width="1105" height="752" usemap="#Map" />

출처

2013-05-03 wall-nut

관련 HTML을 제공하십시오, 그리고 아마도 바이올린 (http://jsFiddle.net) –

나는 관련 HTML을 보여주기 위해 위의 수정 :

#picmap:{margin-top:-150px;}

가되어야합니다 참조하십시오. 본문에서 유일한 HTML은 이미지가 매핑 된 다음지도의 좌표입니다. –

'#picmap'스타일로 콜론이 있습니다.

#picmap {margin-top:-150px;}

출처

2013-05-03 14:17:18 ezekielDFM

고마워요. :) –

이미지 맵이있는 미디어 쿼리

답변

관련 문제