javascript - Picturefill 的响应链接源

Question

我正在使用 Picturefill v2.3.1 并且想知道是否有人知道用链接包装图片标签的方法，该链接也会对视口(viewport)宽度使用react？我的代码目前是这样的:

<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”中为前两个尺寸(中)设置一个 url，然后对于小尺寸(最后两个)根本没有 url。

有人知道这是否可行吗？

Answer 1

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

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

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

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