我一直在使用bourbon neat来进行桌面优先的布局,效果不错。但是,我想做一个以移动端为先的版本,从移动端开始逐步扩展。默认的网格是12列,在移动端上我通常使用4列网格。我尝试将我的网格更改为4列,然后再扩展到12列,但这并没有起作用。除了创建标准的桌面布局,然后在每个CSS选择器中添加一个移动设备媒体查询,并从移动版本开始逐步构建之外,是否有更好的方法来实现移动端优先呢?
对Jorn的回答做个补充...你还需要将$grid-columns
变量设置为移动设备的宽度值,而不是默认的桌面宽度值。这是我正在处理的一个项目中的_grid_settings.scss
文件所呈现的:
@import "../neat/neat-helpers";
// Neat Overrides
$column: golden-ratio(1em, 3);
$gutter: golden-ratio(1em, 1);
$grid-columns: 6;
$max-width: em(1280);
// Neat Breakpoints
$mobile-large-screen: em(480);
$tablet-small-screen: em(560);
$medium-screen: em(640);
$medium-large-screen: em(750);
$large-screen: em(860);
$x-large-screen: em(970);
$xx-large-screen: em(1088);
$super-large-screen: em(1280);
$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6);
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6);
$medium-screen-up: new-breakpoint(min-width $medium-screen 12);
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12);
$large-screen-up: new-breakpoint(min-width $large-screen 12);
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12);
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12);
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12);
您可以看到我创建了很多新的断点,并且在移动宽度时使用了6个列,而不是原始Neat设置中的4个(对于我的项目所需)。您应该根据自己的项目调整这些设置。然而需要注意的是,我覆盖了$grid-columns
变量,然后创建了我的新断点。此外,请确保在Neat之前导入您的_grid_setting.scss
文件...
@import "bourbon/bourbon";
@import "grid_settings";
@import "neat/neat";
您应该使用Neat中的new-breakpoint mixin创建新的断点。但是,与其在示例中使用max-width不同,您可以使用min-width。
例如:
@import "bourbon/bourbon";
@import "neat/neat";
$mobile: new-breakpoint(min-width 0px 4);
$tablet: new-breakpoint(min-width 760px 8);
.main {
background: grey;
@include media( $mobile ) {
@include span-columns(4);
background: white;
}
@include media( $tablet ) {
@include span-columns(8);
background: black;
color: white;
}
}
我建议你查看 Kenneth Ormandy 的 Chasers。它是一个包含了 "xn" 参数的小型 omega-reset(xn)
,可以从前一个媒体查询的 omega(xn)
中传递参数。他在 Github 仓库中提供了大量的文档,并且你可以轻松地使用 Bower 或 NPM 进行安装。