如果移動屏幕大小爲

Question

E.g.替換圖像的替代文字我有一個標識，當屏幕尺寸低於480像素時，圖像隱藏並顯示替代文字。

我想知道是否有簡單的純CSS解決方案，還是我需要使用jQuery？

Answer 1

你真正可以用CSS做的唯一事情就是使用你的標準圖像替換技術來獲得你想要的斷點。

http://cssdeck.com/labs/0r7hlsnt

<h1>Meow</h1> 

@media (min-width: 480px) { 
    h1 { 
    background: url(http://placekitten.com/400/200) no-repeat; 
    height: 200px; 
    text-indent: -100em; 
    } 
} 

任何image replacement技術就行了。

Answer 2

有了適當的媒體查詢，你可以這樣做：

img::after { 
    content: attr('alt'); 
} 

儘管如此，

img { 
    display: none; 
} 

節之後可能隱藏了。