我需要隐藏一些元素,例如图像,仅限移动设备。我如何用semantic-ui来实现这个目标?
在角质材料中有“hide-xs”或者在bootstrap中有“hidden-xs”吗?
我阅读了文档并且找不到类似的东西。我发现的只有some options for a grid,但我不想使用网格,只是为了让元素在某些设备上不可见......
<div class="ui grid">
<div class="two column mobile only row">
<div class="column">
<div class="ui segment">
Mobile only
</div>
</div>
</div>
</div>
我还找到some solution here on SO,有人建议写一些额外的CSS。像这样:
/* 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;
}
}
这真的是要走的路吗?谢谢你的想法。
答案 0 :(得分:0)
是的,您需要使用grid
或覆盖样式。这是进入语义UI的唯一方法。
这在mobile only
类定义中很明显。
@media only screen and (max-width: 991px) and (min-width: 768px) {
.ui[class*="mobile only"].grid.grid.grid:not(.tablet),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
display: none !important;
}
}
@media only screen and (max-width: 1199px) and (min-width: 992px) {
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
display: none !important;
}
}
@media only screen and (max-width: 1919px) and (min-width: 1200px) {
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
display: none !important;
}
}
@media only screen and (min-width: 1920px) {
.ui[class*="mobile only"].grid.grid.grid:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
.ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
.ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
display: none !important;
}
}
希望这有帮助。