css - Foundation + SASS/SCSS 自定义大小

Question

在 Foundation 框架中，您可以针对预定义的屏幕尺寸设置 dom 元素的行为，例如:小号、中号、大号等。出于我的特定原因，我想创建自己的尺寸(预定义尺寸除外)。怎么办呢？谢谢。附言我阅读了媒体查询:http://foundation.zurb.com/docs/media-queries.html但我不明白如何使用它(updated _settings.scss what to do didn't understand)。

Answer 1

你需要确保你了解 Sass 和一个将你的 sass 文件编译成 css 的程序。我使用 Compass 进行编译，所以请看一下。

完成后，安装 Foundation 并开始查看您的 sass 文件；观看您的文件会将它们转换为 css。

您应该看到一个名为 _settings.scss 的部分文件(它们前面有一个下划线)。该文件的 99% 的所有内容都被注释掉了。查找此部分并取消注释:

$small-range: (0em, 40em); /* 0, 640px */
$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

小范围、中范围、大范围等是你的断点。您需要做的就是更改这些值或添加更多断点。