メディアクエリ内の特定の文字を非表示にすることはできますか？

Question

特定のビューポートでメディアクエリ内の 'pipe'（例：|）文字を隠すことができますか？

私はディバイダーとしてそれらを使用していますが、モバイルビューポートで本当に悪いレンダリング、私は何とかちょうどそれらを隠すことができればLOVEは、希望のメニューを持っているので、私は思ったんだけど。

私は、モバイルビューポート内に定義されたCSSでいくつかのjQueryを使用する必要があると思っていますか？

更新10:38 AM：素晴らしい返信をお寄せいただきありがとうございます。私はスパンタグにクラスを追加することで提案しようとしました、そして今、私のパイプは横断して表示されません、私はfooter.php内のマークアップとメディアQの中の対応する隠れです。

<li class="f"><a href="#" class="scrolltime">EXPLORE</a> <span class="pipe"> | </span></li> 

<li class="f"><a href="#" class="scrolltime"> FOR</a><span class="pipe"> | </span></li> 

<li class="f"><a href="#" class="scrolltime">ENHANCED</a><span class="pipe"> | </span> </li> 

<li class="f"><a href="/iframe/buybutton.html" class="fancybox-iframe" style="color:#C6C699;">Iframe</a></li> 
</ul> 

CSS3：は

/* Smartphones (Landscape) ----------- */ 
@media only screen and (min-width: 320px) and (max-width: 480px) { 


#topvidarea { 
    margin-left: 24%; 
    margin-right: 20%; 
    margin-top: -265px; 
    max-width: 400px; 
} 

#topbgimg { display: none; } 

#topbtn, #topbtn2, #topbtn3 { 
    border: 0 solid #C6C699; 
    display: inline; 
    float: left; 
    font-family: Georgia; 
    margin-right: 5px; 
    text-align: center; 
    width: 122px; 
} 


#topvidarea { 
    margin-left: 24%; 
    margin-right: 20%; 
    margin-top: 15px; 
    max-width: 400px; 
} 

#footer a { 
    font-size: 8px; 
    margin: 0; 
    padding: 12px; 
    text-indent: 1px; 
} 

.f { 
    float: none; 
    margin-top: -2px; 
    padding-left: 0; 
} 

.pipe { display: none; } 

} 

Answer 1

ここで根本的な問題は、プレゼンテーション（装飾）にコンテンツ（パイプ文字）を使用していることです。これを避けることは、まずCSSを使用する主な理由の1つです。あなたのサイトを使っている視覚障害者を想像してみてください。彼らのscreen readerはどのように "|"と発音されるのですか？わからない場合は、コンテンツレイヤ（HTML）からプレゼンテーションレイヤ（CSS）に移動する必要があります。 （実際にはスクリーンリーダーは、この共通の落とし穴を回避するのに十分スマートですが、それはまだ便利メンタルエクササイズです。）

することができます、@ChrisNが示唆するように、border-rightまたは-leftを使用しますが、別のオプションは、:afterセレクタを使用することです。例えば、これに代えて：

<nav> 
    <ul> 
    <li>Foo</li> | 
    <li>Bar</li> | 
    <li>Baz</li> 
    </ul> 
</nav> 

あなたのコンテンツからパイプを削除します。その後、

<nav> 
    <ul> 
    <li>Foo</li> 
    <li>Bar</li> 
    <li>Baz</li> 
    </ul> 
</nav> 

およびそれらの間のパイプを置くために、あなたのプレゼンテーション層（CSS）で:afterセレクタを使用します。

@media ... { 
    nav li:after { 
    content: "|"; 
    } 

    /* no "|" after the last one, though */ 
    nav li:last-child:after { 
    content: normal; 
    } 
} 

もちろん、paddingプロパティを使用して、 "|"の周囲に必要なスペースを入れることができます。

このアプローチでは、追加のマークアップでページの重さを軽減することができます。 border-rightを使用してください。画像、または複数の文字や記号、または一部の組み合わせを単なる直線ではなく使用できます。

Answer 2

あなたの最善の策は、おそらくborder-right S（またはborder-left複数可）に、あなたのパイプを変更し、それらをパイプのように表示され、または作るためにスペースを追加することです（推奨されません）<span>などにパイプ文字をラップします。それからあなたは自由にそれらを隠すことができます。

ただし、CSSを使用して文字をそのように非表示にすることはできません。

Answer 3

私はあなたが、特にそのような文字を隠すことができるとは思わないが、あなたはそうのようなものができた（非常に簡単な例を...）

<span class="noshow> | </span> Home <span class="noshow> | </span About 

次に、あなたのメディアにクエリがそれをターゲット

.noshow { display: none } 

これは完璧ではありませんが、機能します。