Question

我的网站是www.rosstheexplorer.com。

我希望在移动设备上加载网站时有一个单独的客户标题，因此低于600px且高于601px。

我试图更改我的header.php代码来完成此操作，但我尝试的任何内容都没有对问题进行排序。

这是我的header.php代码

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Penscratch
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>



</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>


<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">


 <img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">






<header id="masthead" class="site-header" role="banner">
        <div class="site-branding">
            <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

    <div id="content" class="site-content">
        <?php if ( get_header_image() ) : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">

            </a>
        <?php endif;  // End header image check. ?>

这是两个关键线

<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">


 <img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">

Answer 1

正如@Michael Coker在评论中所述

将CSS类添加到＆＃39; img＆＃39;移动显示标签

然后您可以在下面的示例中使用类选择器 - .mobile-header-img - 如果屏幕大于660px，则隐藏移动标题

然后对另一个图像执行相反操作以隐藏小图像中的大图像

请参阅以下代码：

＆＃13;

@media screen and (min-width: 660px) {
    .mobile-header-img {
        display: none;
    }
}

@media screen and (max-width: 660px) {
    .header-img {
        display: none;
    }
}

＆＃13;

<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

＆＃13;

Answer 2

最简单的方法是使用一个容器元素（例如<div>）来保存标题图像。使用CSS将此元素的background属性分配给其中一个图像。然后，您可以在CSS中使用媒体查询来根据需要调整background属性（图像）。

将媒体查询合并到header.php中

2 个答案: