将媒体查询合并到 header.php答案

【问题标题】：Incorporating A Media Query Into header.php将媒体查询合并到 header.php
【发布时间】：2017-11-17 00:58:21
【问题描述】：

我的网站是 www.rosstheexplorer.com。

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

我已尝试更改我的 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">

【问题讨论】：

您应该使用 CSS 媒体查询来执行此操作，它们对于您的站点寻址元素来说是通用的。
您应该尝试自己编写代码。在doing more research 之后，如果您有问题发布您尝试过的方法，并清楚地解释什么不起作用，并提供a Minimal, Complete, and Verifiable example。阅读How to Ask 一个好问题。请务必take the tour 并阅读this。
哪些媒体查询不起作用？
为您想在桌面/移动设备上显示/隐藏的内容添加一个类，例如.mobile 和.desktop，然后使用.mobile { display: none; } @media (max-width: 600px) { .desktop { display: none; } .mobile { display: block; } }?

标签： php html css wordpress header

【解决方案1】：

正如上面在 cmets 中提到的 @Michael Coker

将 CSS 类添加到移动显示的“img”标签中

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

然后对其他图像执行相反的操作，以将大图像隐藏在小显示器中

请看下面的代码：

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

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

<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">

【讨论】：

【解决方案2】：

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

【讨论】：