將媒體查詢合併到header.php中

我的網站是www.rosstheexplorer.com。將媒體查詢合併到header.php中

當網站加載到移動設備上時，我想擁有一個單獨的客戶標題，因此低於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">

來源

2017-06-14 Ross Symonds

您應該使用CSS媒體查詢做到這一點，他們將一般到您的網站解決您的標記元素。 –

您需要嘗試**自己編寫代碼**。在[**做更多的研究**之後]（https://meta.stackoverflow.com/q/261592/1011527）如果你有問題**發佈你已經嘗試了**的**明確的解釋不工作**並提供[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。閱讀[如何問]（http://stackoverflow.com/help/how-to-ask）一個很好的問題。請務必[參觀]（http://stackoverflow.com/tour）並閱讀[this]（https://meta.stackoverflow.com/q/347937/1011527）。 –

您的媒體查詢在哪裏不起作用？ –

做到這一點，最簡單的方法是有一個容器元素（如<div>）至保持標題圖像。使用CSS將此元素的background屬性分配給其中一個圖像。然後，您可以在CSS中使用媒體查詢來根據需要調整background屬性（圖片）。

來源

2017-06-14 18:34:42

正如@邁克爾焦化在評論上述

添加CSS類到「IMG」標籤的移動顯示器

然後，您可以使用類選擇 - .mobile-header-img下面我舉的例子 - 隱藏移動頭如果屏幕大於660px

然後做相反的另一圖像來隱藏從小型顯示器

大圖像請參見下面的代碼：

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

來源

2017-06-14 18:52:58

將媒體查詢合併到header.php中

回答

相關問題