将媒体查询合并到 header.php
Posted
技术标签:
【中文标题】将媒体查询合并到 header.php【英文标题】：Incorporating A Media Query Into 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; ?
【参考方案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 属性（图像）。
【讨论】：
以上是关于将媒体查询合并到 header.php的主要内容，如果未能解决你的问题，请参考以下文章