在不同的设备上显示不同的图像[关闭]

Posted 2023-03-12

【中文标题】在不同的设备上显示不同的图像[关闭]

【英文标题】：Display different images on different devices [closed]

【发布时间】：2016-05-01 22:25:09

【问题描述】：

我正在寻找一种在同一位置显示不同图像的方法，具体取决于从中提取网站的设备。

更多背景：我将我的徽标放在导航栏中 - 它非常适合桌面版本以显示在一行中 - 在移动版本上它太长并且扩展到两行。我想在桌面网站上使用我的完整徽标，而在移动网站上只使用我的徽标中的小符号。

谢谢。

【问题讨论】：

那么...CSS 媒体查询？

【参考方案1】：

如果您使用的是 Bootstrap，则可以通过向图像添加类来轻松实现。 (http://getbootstrap.com/css/#responsive-utilities)

【参考方案2】：

您可以通过使用可见类和隐藏类轻松做到这一点

使用以下任何类来隐藏特定显示上的特定标签/元素并显示在其余部分上。

隐藏-xs 隐藏的sm hidden-md 隐藏-lg

使用以下任何类来在特定显示器上显示特定标签/元素并在其余部分隐藏。

可见-xs 可见-sm 可见-md 可见-lg

还需要更多解释吗？回击我:)