Question

在Foundation框架中，您可以为预定义的屏幕大小设置dom-elements的行为，例如：small，medium large等。出于特定的原因，我想创建自己的大小，但预定义除外。怎么办呢？谢谢。附：我阅读了有关媒体查询的内容：http://foundation.zurb.com/docs/media-queries.html但我不明白如何使用它（更新了_settings.scss该做什么并不理解）。

Answer 1

您需要确保了解Sass以及将sass文件编译为css的程序。我使用Compass进行编译，所以看一下。

一旦你失败了，安装基金会并开始观察你的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)})";

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

Foundation + SASS / SCSS自定义尺寸

1 个答案: