基础5：改变总列数只是为了小

Question

您知道是否可以配置智能手机（小型），平板电脑（中型）和PC（大型）等列数？

示例：

small: 4 columns

tablet and desktop: 12 columns

$total-columns work for all device actualy.

谢谢：）

Answer 1

只有重写规则。

当您指定small-12时 - 在每个屏幕尺寸上从小到大，您的元素将具有12列宽度。 small-12 medium-6会给你12小，中大6。因此，如果您希望所有设备上的元素看起来相同，只需指定small-类。

但是，如果您希望列数不同，请执行以下操作：

使用Foundation SASS，打开settings.scss并取消注释$total-columns变量。 更改号码，编译css，提取@media only screen查询。然后，再次更改$ total-columns，编译，提取中等屏幕的媒体查询。重复大等等。