gpt4 book ai didi

php - 将媒体查询合并到 header.php

转载 作者:太空宇宙 更新时间:2023-11-04 08:34:49 25 4
gpt4 key购买 nike

我的网站是 www.rosstheexplorer.com。

当网站在移动设备上加载时,我希望有一个单独的客户 header ,因此低于 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">

最佳答案

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

关于php - 将媒体查询合并到 header.php,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44552136/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com