javascript - 在移动设计中替换图像的 HTML。喜欢 Paypal.com

Question

好的，菜鸟警报!很抱歉，这里已经回答了问题。如果是这样，请将我链接到问题，因为我找不到它。

我现在正在构建一个响应式网站，但遇到了两个问题。第一个是当您在比手机大的任何屏幕上查看时，您会在左上角看到我的网站名称。但是我想在您使用移动设备时用我的 Logo 替换它。这方面的一个例子是 Paypal.com。如果您在桌面上看到 Paypal Logo 和 PayPal 字样，但在移动屏幕上只有 PayPal Logo 。我的是这样写的:

<p id="logo"><a href="">Name</a></p> 

我该怎么做？这是我可以在 CSS 或 HTML 中做的事情，还是这更像是 javascript/jQuery 的事情？

第二个问题类似。在横幅中间有文字说“没有帐户？”。我想在平板电脑和电脑屏幕上显示这段文字，但在手机上隐藏它。是这样写的:

没有帐户？

您觉得我应该如何解决这个问题？非常感谢!

Answer 1

如果您使用媒体查询，您可以在移动设备上为您的 Logo 设置不同的样式。

    @media screen and (max-width: 767px) {
        #logo {
            display: hidden;
        }
}

当屏幕尺寸低于 767 像素时，这将隐藏 Logo ID。如果您希望某些内容仅在移动设备上显示，请将显示设置为“阻止”。