Css 在ZURB基金会，我如何使一个班级只对某些屏幕大小有效？

我有一个按钮，它有

right

类，因此当在页面的桌面视图上时，它会向右对齐，但当页面处于移动视图时，我想从中禁用

right

类并使其居中。如何在基金会上这样做？

    <div class="row">
        <div class="large-12 column">
            <div class="panel">
                <h4>Get in touch!</h4>

                <div class="row">
                    <div class="large-9 column">
                        <p>We'd love to hear from you!</p>
                    </div>
                    <div class="large-3 column">
                        <a href="#" class="radius button right">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

联系！
我们很想听到你的消息

---

在移动视图中，我希望居中的元素是

联系我们

按钮。

我不确定zurb foundation，但@media css是处理响应页面的一种方式。 这应该会有所帮助。

我注意到帖子后面的代码，如果没有css，很难知道需要更改什么，但是将@media放在css的末尾是你需要做的

像这样的

#top{height:auto;border:double #ccc;height:150px;width:60%;margin:10px auto; }
#center_collum{ border:solid px;min-height:650px;width:57.0%;margin:0% auto;padding-  left:1em;}

@media screen and (min-width:1600px){
body{font-size:100%; }
#top{width:40% }

 }
 @media screen and (max-width:1600px){
body{font-size:100%; }
#top{width:50% }
#center_collum{width:56%; }
 }
@media screen and (max-width:960px){
body{font-size:60%; }
#top{width:70% }
#center_collum{width:54%; }
}
 @media screen and (max-width:440px){
body{font-size:50%; }
#top{width:100% }
#center_collum{width:50%; }
hr{margin-top:1.8em;width:100%}
}

  @media (device-some_attribute_value)

以上只是我正在使用的一段css的工作方式的一个例子。 它在显示器的屏幕大小上工作，你想要的是这样的东西

#top{height:auto;border:double #ccc;height:150px;width:60%;margin:10px auto; }
#center_collum{ border:solid px;min-height:650px;width:57.0%;margin:0% auto;padding-  left:1em;}

@media screen and (min-width:1600px){
body{font-size:100%; }
#top{width:40% }

 }
 @media screen and (max-width:1600px){
body{font-size:100%; }
#top{width:50% }
#center_collum{width:56%; }
 }
@media screen and (max-width:960px){
body{font-size:60%; }
#top{width:70% }
#center_collum{width:54%; }
}
 @media screen and (max-width:440px){
body{font-size:50%; }
#top{width:100% }
#center_collum{width:50%; }
hr{margin-top:1.8em;width:100%}
}

  @media (device-some_attribute_value)

这个链接解释了它是如何工作的

如果您想实际更改该类，可以使用JavaScript完成

element.setAttribute("class","new_class")