Sass 使用定制的媒体查询
描述了以像素为单位设置媒体查询的功能。默认情况下,这将输出像素值作为最小宽度媒体查询 例如:Sass 使用定制的媒体查询,sass,bourbon,neat,Sass,Bourbon,Neat,描述了以像素为单位设置媒体查询的功能。默认情况下,这将输出像素值作为最小宽度媒体查询 例如: $custom-neat-grid: ( columns: 12, gutter: 50px, media: 1000px, ); .element { @include grid-column(3); @include grid-media($custom-neat-grid){ @include grid-column(6); } } 将输出到: .elemen
$custom-neat-grid: (
columns: 12,
gutter: 50px,
media: 1000px,
);
.element {
@include grid-column(3);
@include grid-media($custom-neat-grid){
@include grid-column(6);
}
}
将输出到:
.element {
width: calc(25% - 25px);
float: left;
margin-left: 20px;
}
@media only screen and (min-width: 1000px) {
.element {
width: calc(50% - 75px);
float: left;
margin-left: 50px;
}
}
如何将网格媒体与其他媒体查询属性(如“最大宽度”或“高度”)结合使用?我找到了实现这一点的方法 您可以将完整媒体查询传递给媒体的媒体参数 例如:
$custom-neat-grid: (
columns: 12,
gutter: 50px,
media: 'only screen and (max-width: 600px)',
);