web-dev-qa-db-ja.com

どちらが正しいですか？セマンティックUI：応答性の高い可視性

私はセマンティックUIが初めてで、フレームワークが大好きです。けれども、彼らは膨大な量の役立つドキュメントを持っているし、もっと混乱している。

レスポンシブ表示はどのように機能しますか？

コンテナーには[モバイルのみ、タブレットのみ、小さなモニターのみ、大きなモニターのみ]があり、コードの一部があります。[コンピューターのみ、デバイスのみ]があることがわかりましたか？違いは何ですか？ありがとうございました。

semantic-ui
19
densityx

現在のドキュメントとバージョン2.4.2を反映するように更新されました

レスポンシブビジビリティは、特定の要素（通常はui containerですが、たとえば、特定の画面サイズのグリッド行）。例えば、 <div class="ui container mobile only">は、画面の幅が768px未満の場合にのみ表示されます。

グリッドのドキュメントには Device Visibility セクションがあり、いくつかの可視性修飾子を示しています。

  1. モバイル（mobile only）
  2. タブレット （tablet only）
  3. タブレットとモバイル（tablet mobile only）
  4. コンピューター （computer only）
  5. 大画面（large screen only）
  6. ワイドスクリーン （widescreen only）
  7. すべてのサイズ（修飾子なし）

ドキュメントでは、デバイスブレークポイントが何であるかを明示的に述べていません。ほとんどのものと同様に、セマンティックUIの構築時にSASS変数を介して構成でき、 site.variables 内で定義されます。デフォルトのブレークポイントは次のとおりです。

  1. mobile onlyは768px未満のみを表示します
  2. tablet onlyは、768px-991pxの間のみを表示します
  3. computer onlyは常に992px以上を表示します
  4. large screen onlyは1200px-1919pxのみを表示します
  5. widescreen onlyは1920px以上のみ表示します

グリッドのドキュメントに見られるように、これらを組み合わせることも可能です。 tablet mobile onlyおよびmobile computer onlyは完全に有効です。

30
fstanis

これは768px未満では表示できません。

<div class="ui container mobile only">

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

<div class="ui container mobile only grid">
1
Happy_Shiba