如何在zurb foundation中爲移動設置樣式

Question

我有一個div元素左對齊大屏幕。
我想在移動屏幕上顯示該元素的中心。
我正在使用基金會5框架。

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

我在主css文件中添加了這個，但現在'simpleDivClass'以所有屏幕尺寸爲中心。
我應該怎麼做才能爲手機屏幕設置風格？

Answer 1

從DOC http://foundation.zurb.com/docs/media-queries.html

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

因爲：最大寬度40EM爲僅移動樣式。

Answer 2

如果您使用的是基金會的Sass文件，您還可以使用類似的東西，以便您的媒體查詢在整個項目中保持一致。

@media #{$large-up} { 
    .example { 
    color: red; 
    } 
}