基於CSS的顯示內容

Question

這可能是一個有關CSS的初學者問題。

是否可以決定使用CSS和媒體查詢來打印（顯示）什麼？

說例如，如果我的窗口（或設備屏幕）小於500像素，然後顯示「你好！」否則顯示「Guten Tag！」

我發現了什麼顯示如何決定某些顯示屬性（顏色或...），而不是內容本身。

Answer 1

你需要具備兩個要素，一個用於屏幕比500更大，一個不足500.然後使用媒體查詢顯示/隱藏一個對他們 DEMO：http://jsbin.com/pizosehire/edit?output

HTML

<div class="large">Hello</div> 
<div class="small">Guten Tag</div> 

CSS

.small { 
    display: none; 
} 

@media (max-width: 500px) { 
    .large { 
    display: none; 
    } 
    .small { 
    display: block; 
    } 
} 

Answer 2

您可以使用pseudo-element與content：

p::before{ content: 'foo' } 
 

 
@media (max-width: 500px){ 
 
    p::before{ content: 'bar' } 
 
}

<p></p>

JSFiddle

Answer 3

您將需要媒體的查詢工作。

您可以將您的CSS改變這樣的事情

@media (max-width: 500px){ 
    #mydiv{ background: url('img-sx.img') } 
} 
@media (min-width: 501px){ 
    #mydiv{ background: url('img-s.img') } 
}