在移动设计中替换 HTML 为图像。像 Paypal.com

Question

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

我现在正在构建一个响应式网站，但遇到了两个问题。 第一个是当您在比手机更大的屏幕上查看时，您会在左上角看到我的网站名称。但是，一旦您在移动设备上，我想用我的徽标替换它。 Paypal.com 就是一个例子。如果您在桌面上查看 Paypal 徽标和 PayPal 字样，但在移动屏幕上只有 PayPal 徽标。 我所拥有的内容如下：

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

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

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

没有帐户？

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

Answer 1

如果您使用媒体查询，您可以在移动设备上为您的徽标赋予不同的风格。

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

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