html - 在 CSS 背景图片中添加 URL 链接 - @media only screen

Question

我有一个灵活的时事通讯 - 3 个步骤:

大于 > 660 像素

小于 600 像素

小于 < 350 像素

一切正常，不包括图像链接我有一个看起来像这样的 CSS 条目:

http://mantykora.cleoni.com/~newsletter/2017/lak/Lak_EN.htm

    @media only screen and (max-width: 660px) {
        table.container { width: 600px !important; }

        td.logo img { display:none; }
        td.logo { background:#fff url(http://mantykora.cleoni.com/~newsletter/2017/lak/images/logo65.jpg) no-repeat 10px 10px; height: 60px;}
        td.logo a {??????????????link to site???????????}

是否可以在媒体屏幕上链接图像？

Answer 1

使用两个元素，一个在窄视口(viewport)上显示，一个在宽视口(viewport)上显示。

CSS:

.only-narrow { display: block; }
.only-wide { display: none; }
@media screen and (min-width: 600px) {
  .only-narrow { display: none; }
  .only-wide { display: block; }
}

HTML:

<div class="only-narrow" ><a href="..." ><img src="..." ></a></div>
<div class="only-wide" ><img src="..." ></div>