Отзывчивый источник ссылок для 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> 

Так, например, я хотел бы иметь URL в «A HREF» в течение первых двух размеров (средних), а затем не URL вообще для малых размеров (последние два) ,

Кто-нибудь знает, если это возможно?

Answer 1

Мне непонятно, зачем вам это нужно или что именно вы на самом деле хотите. Я предполагаю, что ссылка повторяется как текст, но не хотите, чтобы изображение было ссылкой на небольшие устройства? Это для уменьшения случайных касаний? Можно ли использовать вкладку для связи с клавиатурой в этом макете?

Один из способов отключить клики по ссылке (не затрагивая клавиатуру) с помощью pointer-events:

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

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