为移动版本使用不同的徽标

Question

我想为我的移动版本使用其他徽标。

我发现您在HTML源代码中添加了另一个徽标，然后在CSS中定义了基于页面大小的徽标。

我的问题是我使用WordPress，无法真正访问源代码。我只能在functions.php文件中写入一些。

我的徽标是导航栏中的位置，这也使它变得更加困难。

将非常感谢任何帮助:)
丹尼尔

我的页面

Answer 1

是的，您可以使用媒体查询来做到这一点：

.mobile-logo-class { 
  display:none;
}
@media screen and (max-width: 768px) { // 768px or your break point
    .mobile-logo-class { 
      display: inline-block; // or block
    }
   .desktop-logo-class {
      display:none;
   }
}

或者您可以使用"图片"标签，但要小心以支持：https://webdesign.tutsplus.com/tutorials/quick-tip-tip-how-to-use-html5-picture-for-responsive-images-images-cms-cms-21015

Answer 2

在正常情况下，如果您的主题提供了移动徽标的选项，则可以上传移动部分的不同徽标，

如果没有移动徽标的选项到您的主题中，则可以使用媒体查询来设置手机宽度的路径或者您可以使用这些插件在移动设备中为您的网站显示不同的徽标。https://wordpress.org/plugins/rocket-wp-mobile/

步骤1：OK首先复制标题文件中的徽标代码，该徽标在您的桌面上调用登录，复制代码并将其粘贴到同一潜水处，现在删除PHP代码并更改DIV类，然后给出那里<img src=" your image path">并保存它。您也可以为图像编写HTML

步骤2：现在在CSS中使用CSS隐藏它。像

.logo2-img {
    display: none;
}

这里徽标2是您的第二个Div类。

步骤3：现在用媒体查询编写CSS

@media screen and (max-width: 768px) { // 768px or your break point
    .logo2-img{ 
      display: block; //
    }
   .desktop-logo-class {
      display:none;
   }
}

那很抱歉英语