html - 如何在 zurb foundation 中只为移动设备设置样式

Question

我有一个在大屏幕上左对齐的 div 元素。
当它在移动屏幕上时，我想将该元素居中。
我正在使用 Foundation 5 框架。

@media only screen {
.simpleDivClass {text-align:center;}
}

我已经在主 css 文件中添加了它，但现在“simpleDivClass”在所有屏幕尺寸中都居中。
只针对手机屏幕设置样式怎么办？

Answer 1

来自文档 http://foundation.zurb.com/docs/media-queries.html

@media only screen and (max-width: 40em) { 
   .simpleDivClass {text-align:center;}
}

因为:max-width 40em 仅适用于移动设备的样式。