web-dev-qa-db-ja.com

モバイル専用の要素を非表示-セマンティックUI

モバイルデバイスの画像の非表示に問題があります。セマンティックUIフレームワークを使用しています。ドキュメントでいくつかのクラスを見つけました：

  1. モバイルのみ-768px以下でのみ表示されます
  2. タブレットのみ-768px〜991pxの間でのみ表示されます
  3. コンピューターのみ-常に992px以上を表示します

たとえば、タブレットやモバイルで画像を隠すために「コンピューターのみ」のクラスを使用していますが、結果は私を混乱させました。

<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>

http://jsfiddle.net/3xkrx/318/

csssemantic-ui
11
WhatIsHTML

また、もう1つの解決策を見つけました。それが役立つ誰かのためかもしれません。

クラスを追加しました"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>
10
WhatIsHTML

追加 mobile only gridからimgタグ

正しい表現は次のとおりです。

<img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
7
vignesh

こちらをご覧ください

/* 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...

https://jsfiddle.net/8LkLoxcx/

4
Achmed Zuzali