在手机上更换Logo

为什么你想在手机平台上使用不同的Logo

网站所有者想要在移动设备(也包括平板电脑)上使用不同于桌面版本的logo的最常见原因之一是空间的问题。适合台式机版本的logo并不总是适用于平板电脑和移动设备。

以这个标志为例。

在桌面上，logo在一行内就能与主导航相匹配。然而，在平板电脑等较小的设备上，由于logo和导航的长度，后者会向下推。

在网页设计中，这看起来不太好，有几个设计选项可以解决这个问题。其中之一就是在较小的设备上使用不同的标识。假设你选择了这条路线，你想使用如下所示的更简单、更小的徽标。

使用箴头构建器很简单。你所需要做的就是使用基于屏幕大小隐藏选择使用不同的标志。但在X但这并没有那么简单。以下是实际的步骤。

如何为移动设备更换Logo

1. 去WP管理员>媒体>添加新．
2. 上传要在较小设备中使用的徽标。
3. 上传完成后，您将看到如下所示的内容。单击编辑超链接。

4. 您将看到如下所示的Edit屏幕。让这个屏幕保持打开状态，因为我们将在接下来的几个步骤中重新讨论它。

5. 打开一个新的浏览器选项卡，转到你的网站的管理区域。
6. 现在转到X >主题选项> CSS并添加以下代码:

@media (max-width: 979px){.x-brand。img{后台:url(输入url这里)无重复中心中心;Background-size: 100% 100%;} .x-brand。Img Img{透明度:0;}}

7. 这部分代码说在这里输入url时，需要粘贴新logo文件的URL。
8. 要获得URL，返回步骤4中的Edit Screen，并复制File URL。

9. 回到第6步中的CSS代码，粘贴File URL以取代在这里输入url．
10. 点击保存．

总结

伟大的工作!您只是将徽标换成了较小的设备。