css - 如何根据内容是否在小屏幕上查看，在我的 Rails 应用程序中显示文本与图像？

Question

我正在使用 Rails 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">