我正在使用 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。
有人知道这是否可行吗?
最佳答案
我不清楚您为什么想要这个,或者您真正想要的是什么。我想您已将链接重复为文本,但不希望图像成为小型设备上的链接?是为了减少误触吗?能够在该布局中使用键盘跳转到链接是否可以?
禁用点击链接(不影响键盘)的一种方法是使用 pointer-events
:
@media (max-width: 767px) {
.screenshot-lightbox { pointer-events: none; }
}
关于javascript - Picturefill 的响应链接源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32527181/