Question

我的签名由3个简单的图像组成。我试图让它具有响应性，但是当使浏览器变得更小时，即使在桌面上也无法使其工作。

我看了几个例子，但似乎忽略了一些东西。我想要实现的是，当在桌面上查看时，签名是原始宽度的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>

Answer 1

请尝试使用这些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>标记。

@media查询无法在签名中工作

1 个答案: