CSS 仅针对移动设备隐藏元素 - 语义 UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38183708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide element for mobile only - Semantic UI
提问by WhatIsHTML
I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes:
我在为移动设备隐藏图像时遇到问题。我正在使用语义 UI 框架。在文档中，我找到了一些类：
- mobile only - will only display below 768px
- tablet only - will only display between 768px - 991px
- computer only - will always display 992px and above
- 仅限移动设备 - 仅显示低于 768 像素
- 仅限平板电脑 - 只会在 768 像素 - 991 像素之间显示
- 仅限计算机 - 将始终显示 992px 及以上
Just for example, I'm using "computer only" classes to hide image on tablets and mobile, but the result confused me.
例如，我使用“仅限计算机”类来隐藏平板电脑和移动设备上的图像，但结果让我感到困惑。
<div class="ui grid stackable">
<div class="row middle aligned">
<div class="nine wide column">
<h1 class="ui header blue">Default Header.</h1>
</div>
<div class="seven wide computer only column">
<img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
</div>
</div>
</div>
采纳答案by WhatIsHTML
Also, I found one more solution. May be for someone it will helpful.
另外，我找到了另一种解决方案。可能对某人有帮助。
I've added classes "mobile hidden"to column which I wanted to hide on mobile devices.
我已将类添加"mobile hidden"到我想在移动设备上隐藏的列。
<div class="ui grid stackable">
<div class="row middle aligned">
<div class="nine wide column">
<h1 class="ui header blue">Default Header.</h1>
</div>
<div class="seven wide column mobile hidden">
<img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
</div>
</div>
回答by vignesh
Add mobile only gridto imgtag
添加mobile only grid到img标签
The correct expression is below:
正确表达如下：
<img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
回答by Achmed Zuzali
Visit here works really well
访问这里效果很好
/* Mobile */
@media only screen and (max-width: 767px) {
[class*="mobile hidden"],
[class*="tablet only"]:not(.mobile),
[class*="computer only"]:not(.mobile),
[class*="large monitor only"]:not(.mobile),
[class*="widescreen monitor only"]:not(.mobile),
[class*="or lower hidden"] {
display: none !important;
}
}
etc...
