1

我正在使用 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”中有一个 url，然后对于小尺寸（后两种）根本没有 url。

任何人都知道这是否可能以某种方式？

4

1 回答 1

1

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

禁用链接点击（不影响键盘）的一种方法是使用pointer-events：

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

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

于 2015-09-15T16:20:40.217 回答