可能隱藏媒體查詢中的特定字符？

我想知道是否可以在特定視口的媒體查詢中隱藏'管道'（例如：|）字符嗎？可能隱藏媒體查詢中的特定字符？

我不知道，因爲我有一個使用它們作爲分隔，但在移動視口渲染真的很差菜單，所以將LOVE，如果我能在某種程度上只是隱藏起來。

我想我可能不得不在移動視口中使用一些jQuery與我定義的CSS？

有什麼建議嗎？

更新10:38上午：非常感謝你們的回覆。我試過建議添加類到span標記，現在我的管道不會顯示交叉，下面是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; } 

}

來源

2012-03-12 Fred Randall

你可以分享相關的代碼，或者更好的做一個[fiddle]（http://jsfiddle.net/）嗎？ – 2012-03-12 14:29:39

這裏的根本問題是您使用內容（管道字符）進行演示（裝飾）。避免這是首先使用CSS的主要原因之一。想象一下使用您的網站的視力受損人士。 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>

然後使用:after選擇在表現層（CSS）把他們之間的管道：

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

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

您當然可以使用padding屬性在「|」周圍放置所需的空間量。

此方法避免了使用額外標記對您的頁面進行權衡，並且還爲您提供了更大的靈活性。 border-right，因爲你可以使用一個圖像，或幾個字符或符號，或一些組合，而不是一條直線。

來源

2012-03-12 14:38:57

我認爲這是一個可接受的'content'的用例，儘管我非常重視[這裏陳述的內容]（http://stackoverflow.com/a/2435542/1134541）。 – chrisn 2012-03-12 14:56:33

我同意'內容'不應該用於呃內容，但在這種情況下「|」絕對是演示文稿（正如OP希望在某些視圖中隱藏它的事實所證明的那樣）。 – 2012-03-12 15:25:56

您最好的選擇可能會改變你的管道border-right S（或border-left S）和增加間距，使它們看起來像管道，或（不推薦）將你的管道字符包裝在<span>等中。然後你可以隨意隱藏它們。

但是，不，你不能通過CSS隱藏字符。

來源

2012-03-12 14:29:24 chrisn

謝謝，是的，我只是想給他們一個類，只是隱藏在視口，但

，創建了一個換行符，現在我的管道在我的菜單下面10px！ – 2012-03-12 14:31:19

這是因爲'p'是一個塊元素。使用'span'，因爲它是內聯的，或者相應地改變你的CSS。 – chrisn 2012-03-12 14:32:13

我不認爲你可以專門隱藏這樣的角色，但你可以這麼像（很簡單的例子。）

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

然後在你的媒體查詢瞄準它

.noshow { display: none }

這是不整潔的，但它的工作原理。

來源

2012-03-12 14:31:25

可能隱藏媒體查詢中的特定字符？

回答

相關問題