我一直在使用波旁威士忌做一个桌面的第一个布局工作正常.
但是,我想做一个移动的第一个版本,从移动开始,然后继续努力.默认网格是12列,对于移动设备,我通常使用4的网格.我尝试将网格设置为4并扩展到12,但这不起作用.
除了创建标准桌面布局,然后将移动媒体查询放入每个CSS选择器并从移动版本开始并构建方式之外,是否有更好的方法来进行移动操作？
解决方法
您应该使用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;
}
}
在示例中,.main将具有白色背景并且由4列组成.当视口的宽度至少为760像素时,它将获得黑色背景并跨越8列.
