javascript - 如何使用 Rails 根据屏幕尺寸隐藏或显示 View 中的元素？

Question

这是我的登录表单的部分代码:

    <div class="row">

        <div class="small-10 medium-8 large-6 small-centered columns">

            <div class="row collapse animated slideInLeft">

                <div class="hide-for-small-only medium-4 large-4 large-centered columns ">
                  <%= f.label :email, 'Email', class: "prefix signlbl email" %>
                </div>

                <div class="hide-for-small-only small-12 medium-8 large-8 columns">
                  <%= f.text_field :email, class: "input" %>
                </div>
                <div class="show-for-small-only small-12 medium-8 large-8 columns">
                  <%= f.text_field :email, class: "input smallmail", autofocus: true, placeholder: "Email" %>
                </div>

            </div>
        </div>          

    </div>

我使用 Zurb Foundation 根据屏幕大小显示和隐藏电子邮件表单。当屏幕较小时，会显示不同的输入字段，其中包含附加类“smallmail”(因此我可以以不同的方式设置移动版本的样式)和占位符，因为在移动版本中我隐藏了标签。该网站的完整版本不需要占位符。

这可行，但有一个问题。该表单有两个带有电子邮件的输入字段，Rails 应用程序会感到困惑。表格不起作用。我该如何解决这个问题？

Answer 1

为什么您需要多个电子邮件输入字段？如果您想要的只是不同的样式，那么您就走错了方向。如果您想以不同的方式设计您的移动版本，您可以使用媒体查询:http://foundation.zurb.com/docs/media-queries.html 。现在您可以为小屏幕添加额外的 css。