将媒体查询合并到header.php中
我的网站是www.rostheexplorer.com 当站点加载到移动设备上时，我希望有一个单独的客户头，即低于600px和高于601px 我曾尝试更改header.php代码以完成此任务，但我没有尝试解决问题 下面是我的header.php代码将媒体查询合并到header.php中,php,html,css,wordpress,header,Php,Html,Css,Wordpress,Header,我的网站是www.rostheexplorer.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="c
<?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. ?>
最简单的方法是使用一个容器元素（例如
）来保存标题图像。使用CSS将此元素的background
属性指定给其中一个图像。然后，您可以在CSS中使用媒体查询，根据需要调整背景属性（图像）。如上面评论中提到的@Michael Coker
为移动显示器的“img”标记添加CSS类
然后，如果屏幕大于660px，您可以使用类选择器-.mobile header img
，隐藏移动头
然后对另一个图像执行相反的操作，以在小屏幕上隐藏大图像
请参阅下面的代码：
@媒体屏幕和（最小宽度：660px）{
.mobile header img{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：660像素）{
.标题img{
显示：无；
}
}
您应该使用CSS媒体查询来完成这项工作，这些查询对于标记中的站点寻址元素是通用的。您应该尝试自己编写代码。如果您有问题，请发布您尝试过的内容，并清楚解释哪些内容不起作用，然后提供。读一个好问题。请确保阅读。不起作用的媒体查询在哪里？请在桌面/手机上显示/隐藏的内容中添加一个类，如.mobile
和.desktop
，然后使用.mobile{display:none；}@media（最大宽度：600px）{.desktop{display:none；}.mobile{display:block；}
？
<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">