显示在桌面上的按钮/链接移动隐藏

-1

<a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a>

我希望它只是显示在移动设备上手机专门在我的CSS我试过

@media (max-width: 991px) { 
    .mobile-only { 
     display:block !important; 
    } 

} 
.mobile-only{ 
    display:none !important; 
}

但它不工作有没有办法做到这一点？

来源

2017-07-14 Wojtek T

.mobile-only { 
    display: none; 
} 

@media only screen and (max-width: 767px){ 
    .mobile-only { 
     display: block; 
    } 
}

来源

2017-07-14 14:32:58

它肯定工作粘贴这个，或者如果你想选项卡，而不是改变最大宽度。 –

这不起作用链接仍然在桌面上显示 –

虽然此代码可能会回答问题，但提供有关此代码为什么和/或如何回答此问题的其他上下文会提高其长期价值。 –

只。移动-唯一一类移动到上面的媒体查询，remenber即级联样式表，这意味着媒体查询将在文件的结尾处，或相反，你可以将.mobile-仅限于仅影响桌面分辨率的媒体查询。顺便避免在你的CSS中使用！重要的声明。

.mobile-only{ 
    display: none; 
} 

@media only screen and (max-width: 991px) { 
    .mobile-only { 
     display: block; 

    } 
}

其他方式将是：

@media only screen and (max-width: 991px) { 
    .mobile-only { 
     display:block; 

    } 

} 
@media only screen and (min-width: 991px) { 
    .mobile-only{ 
     display: none; 
    } 
}

来源

2017-07-14 14:37:05

我建议不要用！！重要的语句使代码饱和。 – vladko13

对不起@ vladko13，我忘了在我的答案中删除它。更新它 –

@AlbertoLinares感谢您的答案，但链接仍在显示 –

这应该工作。

.mobile-only { 
    display: block; 
} 

@media screen and (min-width: 768px){ 
    .mobile-only { 
     display: none; 
    } 
}

来源

2017-07-14 14:39:39

显示在桌面上的按钮/链接移动隐藏

回答

相关问题