将媒体查询合并到header.php中 [英] Incorporating A Media Query Into header.php
本文介绍了将媒体查询合并到header.php中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站是www.rosstheexplorer.com。
当网站加载到移动设备上时，我希望拥有一个单独的客户标题，因此低于600px且高于601px。
我试图改变我的header.php代码来完成这个任务，但我没有试过已经排序过的问题。
这是我的header.php代码
<？php
/ **
*我们主题的标题。
*
*显示所有< head>部分和所有东西直到< div id =content>
*
* @package Penscratch
* /
？><！DOCTYPE html>
< html<？php language_attributes（）; ？>>
< head>
< meta charset =<？php bloginfo（'charset'）;？>>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title><？php wp_title（'A |'，true，'right'）; ？>< /标题>
< link rel =profilehref =http://gmpg.org/xfn/11>
< link rel =pingbackhref =<？php bloginfo（'pingback_url'）;？>>
<？php wp_head（）; ？>
< / head>
< body<？php body_class（）; ？>>
< div id =pageclass =hfeed site>
< a class =skip-link screen-reader-texthref =＃content><？php _e（'Skip to content'，'penscratch'）; ？>< / A>
< header id =mastheadclass =site-headerrole =banner>
< div class =网站品牌>
<？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-navigationclass =main-navigationrole =navigation>
< button class =menu-toggle><？php _e（'Menu'，'penscratch'）; ？>< /按钮>
<？php wp_nav_menu（array（'theme_location'=>'primary'））; ？>
< / nav><！ - ＃site-navigation - >
< / header><！ - #masthead - >
< div id =contentclass =site-content>
<？php if（get_header_image（））：？>
< a href =<？php echo esc_url（home_url（'/'））;？>的rel = 家 >
< / a>
<？php endif; //结束标题图片检查。 ？>
以下是两条重要线路：
< img src =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg >
解决方案
正如@Michael Coker在评论中提到的 p>
在移动显示的'img'标记中添加一个CSS类
然后，您可以使用类选择器 - .mobile-header-img 在下面的示例中 - 如果屏幕大于660px，则隐藏移动页眉
然后对另一张图片做相反处理，以便从小显示器中隐藏大图像。
请参阅下面的代码：
@media screen and（min-width：660px）{.mobile-header-img {display：none; }} @媒体屏幕和（最大宽度：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 -imgsrc =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg>
My website is www.rosstheexplorer.com.
I want to have a separate customer header when the site loads on mobile devices, so below 600px and above 601px.
I have attempted to change my header.php code to accomplish this but nothing I have tried has sorted the problem.
Here is my header.php code
<?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. ?>
These are the two key lines
<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">
解决方案
As @Michael Coker noted above in the comments
add a CSS class to the 'img' tag for mobile displays
You can then use the class selector - .mobile-header-img in my example below - To hide the mobile header if the screen is bigger than 660px
Then do the opposite for the other image to hide the large image from small displays
See the code below:
@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">
这篇关于将媒体查询合并到header.php中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
