Picturefill的响应式链接源

Question

我使用的是Picturefill v2.3.1，我想知道是否有人知道用链接包装图片标签的方法，该链接也会对视口宽度做出反应？我的代码目前是：

<a href="" class="screenshot-lightbox">
    <picture>
        <source
            srcset="<?php echo $content->images()->find('medium_2x_'.$curlang.'.jpg')->url() ?> 2x"
            media="(min-width: 768px)">
        <source
            srcset="<?php echo $content->images()->find('medium_'.$curlang.'.jpg')->url() ?>"
            media="(min-width: 768px)">
        <source
            srcset="<?php echo $content->images()->find('small_2x_'.$curlang.'.jpg')->url() ?> 2x"
            media="(max-width: 767px)">
        <source
            srcset="<?php echo $content->images()->find('small_'.$curlang.'.jpg')->url() ?>"
            media="(max-width: 767px)">
        <img
            srcset="<?php echo $content->images()->find('small_'.$curlang.'.jpg')->url() ?>"
            media="(max-width: 767px)">
    </picture>
</a>

因此，例如，我想有一个网址在"a href“的前两个大小(中等)，然后没有网址在所有的小尺寸(最后两个)。

有谁知道这是不是可能的？

Answer 1

我不清楚你为什么想要这个，或者你真正想要的是什么。我想您已经将链接重复为文本，但不希望图像成为小型设备上的链接？它是为了减少意外接触吗？可以使用该布局中的键盘跳转到链接吗？

禁止点击链接(不影响键盘)的一种方法是使用pointer-events

@media (max-width: 767px) {
  .screenshot-lightbox { pointer-events: none; }
}

请参阅http://caniuse.com/#feat=pointer-events