显示基于CSS的内容

Question

这可能是关于CSS的初学者问题。

是否可以使用CSS和媒体查询来决定要打印（显示）的内容？

例如，如果我的窗口（或设备屏幕）小于500像素，则显示“Hello！”否则请“Guten Tag！”

我发现的内容显示了如何决定某些显示属性（颜色或......），而不是内容本身。

Answer 1

您可以pseudo-element使用content：

p::before{ content: 'foo' }

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

<p></p>

JSFiddle

Answer 2

您需要有两个元素，一个用于大于500的屏幕，一个用于小于500.然后使用媒体查询显示/隐藏其中一个元素 演示：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 3

您需要使用媒体查询。

您可以将css更改为此类

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