Question

我有一个网站，我在该网站上使用悬停效果来显示更多细节。在小型显示器或移动设备上时，我想将悬停效果“转换”为链接并显示带有信息的模式面板。我找到了解决办法

<h2>
    <span class="profile-large">Item name</span>
    <a class="profile-small" href="javascript:;">Item name</a>
</h2>

因此，在css文件中，我定义了断点，以使profile-large类或profile-small类可见。这是有效且正确的方法吗？谢谢

Answer 1

您将必须使用@media规则。

在下面的示例中，我将为移动设备的最大宽度设置900px，对于台式设备的最大宽度设置为900px。

CSS

@media (min-width: 901px) { // desktop-devices
    .profile-small { display: none; }
}

@media (max-width: 900px) { // mobile devices
    .profile-large { display: none; }
}

基本上，您说的是对大屏幕隐藏anchor，对小屏幕隐藏span。

Answer 2

是的

这是一种常见的方法。

查看引导程序前端框架如何处理此https://v4-alpha.getbootstrap.com/layout/responsive-utilities/。还借助实用程序CSS类。

在这里您可以找到相应的代码：https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss

当然，您可以基于此开发自己的解决方案。尤其是如果您不需要所有这些文件来节省一些字节。

在移动设备或小显示器上时，将悬停效果切换为链接

2 个答案: