0

ZURB Foundationフレームワークを使用してレスポンシブ レイアウトに取り組んでいます。

ナビゲーション バーのテキストの横にいくつかのアイコン (アイコン フォント スパン) を追加しました。

ビューポートの幅が狭く、すべてのナビゲーション項目を 1 行に表示できない場合は、次の行にカスケードする項目のテキスト ラベルのみを非表示にし、その項目のフォント サイズ (アイコン サイズ) を大きくする必要があります。新しい固定値。

私が探しているものを示すために、3つの画像を添付しています（クロムインスペクターでだましました）。

これは JavaScript なしで可能ですか? もしそうなら、どのように？

全画面表示

ウィンドウ付き

モバイル

4

4 に答える 4

3

そう...

リンク テキストの一部を非表示にするためにW3C によって提案されたソリューションを次に示します。

height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;

次の HTML コードを使用するとします。

<li><a href="#">Documentation</a></li>

（たとえば）30px => 50px変換が必要な場合の解決策は次のとおりです。

li {
  padding-left : 30px;
  line-height  : 30px; /* vertical align */
  background   : transparent url(http://placehold.it/30) no-repeat scroll 0 0;
}

/* Put whatever you want as a size here */
@media (max-width: 600px) { 
  li {

    background : transparent url(http://placehold.it/50) no-repeat scroll 0 0;
    width      : 50px;
    height     : 50px;
  }
  a {
    height   : 1px;
    width    : 1px;
    position : absolute;
    overflow : hidden;
    top      : -1000px; 
  }
}

このソリューションでは、イメージに 2 つのバージョンを作成する必要があります。しかし、実際には画像のサイズ変更は推奨されていないため、1 つの画像の 2 つのバージョンを処理することは、実際には悪い考えではありません。

特定のケースで、フォント アイコンを使用している場合は、おそらく次の種類の HTML コードを使用できます。

<li>
  <a href="#">
    <span class="icon">X</span>
    <span class="text">Documentation</span>
  </a>
</li>

したがって、次のように CSS コードを適応させることができます。

span {
  font-size : medium;
}

@media (max-width: 600px) { 
  span.icon {
    font-size : x-large;
  }
  span.text {
    height   : 1px;
    width    : 1px;
    position : absolute;
    overflow : hidden;
    top      : -1000px; 
  }
}
于 2012-12-14T00:02:52.720 に答える
1

このようなことを試してみませんか？

CSS：

@media (max-width: 320px) 
.noshow {
display: none;
}

また、HTMLマークアップで、非表示にするテキストに「noshow」クラスを適用します。

于 2012-12-13T23:46:27.577 に答える
1

Charles-Edouard Costeの回答を繰り返すことで、解決策を見つけました。私はSassを使用していますが、最初にそのCSS出力を表示します。

nav .nav-bar .icon {
  font-size: 24px;
  padding-right: 4px;
}

@media only screen and (max-width: 700px) {
  nav .nav-bar li:nth-child(1) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  nav .nav-bar li:nth-child(2) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  nav .nav-bar li:nth-child(3) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1000px) {
  nav .nav-bar li:nth-child(4) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1100px) {
  nav .nav-bar li:nth-child(5) .icon-label {
    display: none;
  }
}

このソリューションは、100ピクセルのデクリメントごとに1つのラベルを非表示にして機能します。残念ながら、リスト内の要素ごとに新しいルールが必要であるため、スタイルシートのいずれかが必要です。

  1. リストの長さを正確に知っている、または
  2. 妥当な最大長まで、潜在的に未使用のディレクティブを含めます。

再利用のためにSassミックスインを作成し、ソースの冗長性を減らすことを選択しました。

@mixin iconlist( $min-width, $label-selector, $step: 100px, $count: 5 )
  //
   The iconlist() mixin will responsively hide labels, 
   starting from the last, as the viewport width is decreased.

   This can be included in a horizontal list to show only icons
   on small screens, while still displaying as many labels as
   possible, assuming items are prioritized from most important
   to least.

  @for $i from 1 through $count
    $max-width: $min-width + ( $step * $i )
    @media only screen and (max-width: #{$max-width})
      li:nth-child(#{$i})
        #{$label-selector}
          display: none

使用法

.nav-bar
  // Responsively hide 0-3 labels from the end of the list.
  @include iconlist(600px, '.icon-label', 100px, 3)

誰かがCSSを小さくしたり、より適切に分離したりするリファクタリングを提案したいのであれば、それは素晴らしいことです！しかし、それがどのように行われるのかはわかりません。

于 2012-12-14T03:00:02.393 に答える
-1

お好みやニーズに合わせて編集してください。

@media only screen and (max-device-width: 480px) { 

  html {
    -webkit-text-size-adjust: none;
  }

  .tooBig {
    display: none;
  }

}
于 2012-12-13T23:46:09.340 に答える