WordPress 4.4响应有时不起作用

时间:2015-12-24 作者:Gregory Schultz

WordPress 4.4发布后,它增加了使用picturefill JavaScript库使功能图像响应的功能。还有其他人对<picture> 标签有时有效,有时无效。

我用于响应功能图像的代码:

<picture>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(max-width: 599px)"></a>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(max-width: 767px)"></a>
<a href="<?php the_permalink(); ?>"><source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg"></a>
<!-- fallback -->
<a href="<?php the_permalink(); ?>"><img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg" alt="alt text"></a>
</picture>
当我复制一个css技巧示例代码时。com,这起作用:

<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(min-width: 1000px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(min-width: 800px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg.jpg"> 
<!-- fallback -->
<img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg.jpg" alt="alt text">
</picture>
然后,我将媒体元素替换为第一个示例中的元素。当我添加另一篇文章或更改功能图片时,有没有什么想法是什么导致这一点起作用,然后不起作用?

谢谢

1 个回复
最合适的回答,由SO网友:Gregory Schultz 整理而成

通过移除<a href> 从图像中。这是通过链接制作响应图像的正确方法:

<a href="<?php the_permalink(); ?>">
<picture>
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-499px" media="(max-width: 599px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-120x90.jpg" media="(max-width: 767px)">
<source srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg">
<!-- fallback -->
<img srcset="<?php echo get_template_directory_uri(); ?>/img/noimg-220x116.jpg" alt="alt text">
</picture>
</a>

相关推荐

mobile vs responsive sites

美国一家医疗诊所的网络公司告诉我,对他们来说,建立一个常规的WP网站和一个单独的WP移动网站比建立一个单一的WP响应网站更便宜。什么是更好的传统智慧。是否只对那些负担不起常规和移动站点的用户做出响应,或者它处理的设备是否比移动站点多?