小さな画面でコンテンツを表示している場合、Railsアプリにテキストと画像を表示するにはどうすればよいですか？

Question

私はparticualar検索ページでレール5を使用してい

、私は私が望む何

<%if current_user && result.user_my_object_time_matches && result.user_my_object_time_matches[0] && result.user_my_object_time_matches[0].matches %> 
    Saved 
<% else %> 
    <%= link_to image_tag('plus-icon.png', :alt => 'Save'), logged_in? ? user_my_object_time_matches_create_path(:id => result.id) : '#', :class => logged_in? ? 'link-save' : 'spawn-dialog', title: 'Save', :remote => logged_in?, :data => {:id => result.id} %> 
<% end %> 

が（未満450ピクセルの画面幅のブラウザ）、代わりに単語を表示する携帯電話のブラウザ上でこのロジックを持っています「保存済み」、プロジェクトにダウンロードしたイメージ（app/assets/images/checkmark.png）のチェックマークアイコンを表示したいと思います。コンテンツが小さなブラウザで表示されているかどうかに基づいて、どのように異なるコンテンツを表示するのですか？

Answer 1

CSSでこれを行うには、要素に「保存済み」テキストを置き、メディアクエリを使用します。

img { display: none; } /* hide by default */ 
 

 
@media (max-width: 450px) { 
 
    img { 
 
    display: block; 
 
    } 
 
    p { 
 
    display: none; 
 
    } 
 
}

<p>Saved</p> 
 
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">