在使用 Chrome 开发人员工具尝试识别要在媒体查询中操作的元素后,我未能使横幅响应平板电脑和 iphone 尺寸。这是网址:
http://thursdaypools.mediafuel.net/innovations/fiberglass-pool-anchoring-system/
如果你调整它的大小,你会看到横幅图片的大小根本没有改变,我已经尝试了以下方法:
@media screen and (max-width: 991px) { #video-header { height: 240px; } }
/*@media (max-width: 980px) { .banner { height: 30vh; } }*/
被注释掉的代码是我之前的人写的,当我拿到它时它不起作用,你在顶部看到的是我在尝试使用我已有的东西之后所做的努力。 #video-header 和 .banner 似乎都没有任何区别。
那个横幅的代码是这个:
<?php get_header(); ?>
<div id="post-page" class="single-innovations-page content-area"> <?php get_template_part( 'template-parts/content', 'page-intro' ); ?>
<!--dancortes added this code below here-->
<?php get_template_part('template-parts/content','page-banner'); ?>
<?php if( get_field( 'product_video' ) ): ?>
<div id="video-header" class="full-video">
<iframe id="player" type="text/html" width="100%" height="100%" src="<?php the_field( 'product_video' ); ?>?enablejsapi=1&rel=0;" frameborder="0" allowfullscreen></iframe>
<div onClick="closeVideo()" class="close-video">
<p>Close</p>
</div>
</div>
<?php endif; ?><!--product_video-->
<main class="subpage-content">
<div class="medium-wrapper">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="innovation-information">
<?php the_field( 'innovation_information' ); ?>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
</div><!--page-top-->
最佳答案
将background-size
添加到.banner
.banner {
background-size: contain;
}
关于html - 媒体查询没有达到预期的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43289309/