@media 쿼리가 서명에서 작동하지 않습니다.

내 서명은 3 개의 간단한 이미지로 구성됩니다. 나는 그것을 반응 적으로 만들려고 노력하고 있지만 브라우저를 모바일 장치를 따라 더 작게 만들 때 데스크탑에서도 작업 할 수는 없습니다.@media 쿼리가 서명에서 작동하지 않습니다.

몇 가지 예를 살펴 보았지만 뭔가를 간과하는 것처럼 보입니다. 내가 원했던 것은 바탕 화면에서 볼 때 서명이 원래 너비의 40 %이고 작은 화면에서 볼 때 100 %라는 것입니다.

<html> 
<head> 
<title>Signature</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style type"text/css" media="screen"> 
    /*Global Styles*/ 
    table[class="sig"] img { 
      width: 40% !important; 
      height: auto !important; 
    } 

    @media screen and (max-width: 480px){ 
     table[class="sig"] img { 
      width: 100% !important; 
      height: auto !important; 
     } 
    } 
</style> 
</head> 
<body> 
    <table class="sig" width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td colspan="3"><img src="http://example.com/main.png"></td> 
     </tr> 
     <tr> 
      <td><img src="http://example.com/left.png"></td> 
      <td><a href="#"><img src="http://example.com/right.png"></td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2017-09-11 bigears

내가 잘하고 있다고 생각합니다. - 이와 비슷한 것을 찾고 있습니다. - https://codepen.io/nagasai/pen/mBbRaK –

대신이 CSS 선택기을 시도해보십시오

table.sig img { 
    width: 40% !important; 
    height: auto !important; 
} 

@media (max-width: 480px) { 
    table.sig img { 
    width: 100% !important; 
    height: auto !important; 
    } 
}

Working Resizable Fiddle (데모 사용 placehold.it 이미지) 또한

기억을 당신의 <a></a> 태그를 닫습니다.

출처

2017-09-11 16:21:15 Syden

@media 쿼리가 서명에서 작동하지 않습니다.

답변

관련 문제