这个人将把我送进一个早期的坟墓,提前感谢您将我拉出来的任何帮助。
简短的故事:at-breakpoints
从平板电脑网格切换到桌面网格时,列表元素上的多个元素会失败,但在从移动网格切换到平板电脑时效果很好。
顺便说一句,从移动优先的方法开始。
这是标记:
<html>
.
.
.
<div id="container">
<div id="content">
<article class="page">
<ul id="members-frontpage">
<li class="member">
.
.
.
</li>
</ul>
</article>
</div>
</div>
.
.
.
<html>
基本的 Susy 配置:
@include border-box-sizing;
//Mobile First config
$total-columns : 4;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
$show-grid-backgrounds : true;
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;
//Breaks
$break-to-medium: 30em 12; //break from phone to tablet
$break-to-large: 65em 25; //break from tablet to desktop
基本布局:
#container {
min-height: 100%;
height: 100%;
@include container($total-columns, $break-to-medium, $break-to-large);
@include at-breakpoint($break-to-medium) {
@include set-container-width;
}
@include at-breakpoint($break-to-large) {
@include set-container-width;
}
}
最后是当前失败的代码:
什么有效?从移动 4 列网格到平板电脑 12 列网格使用at-breakpoint
. 甜的!
什么失败了?当从平板电脑网格中分离omega(2n)
出来时.member list items
,第二个列表元素会保留它,omega(2n)
尽管它已移动到不需要它的桌面,因此会破坏所需的 5 栏显示。
从 Firebug#members-frontpage .member:nth-child(2n)
中提取:#2 列表项。不希望它在那里。希望这是有道理的。
.page {
padding: 0 $grid-padding;
@include at-breakpoint($break-to-medium) {
@include susy-grid-background;
}
@include at-breakpoint($break-to-large) {
@include susy-grid-background;
padding: rhythm(1,16px) 0;
@include squish(2,2);
}
}
#members-frontpage { //ul
@include clearfix;
list-style: none;
margin: 0;
padding: rhythm(1,16px) 0 0 0;
text-align: center;
.member { //li
position: relative;
min-height: 15em;
margin: 0 0 rhythm(2,16px) 0;
border-radius: .75em;
border: .1em solid rgba($green, .4);
background: rgba(255,255,255,.4);
//Here We Go
@include at-breakpoint($break-to-medium) {
@include span-columns(6,12);
@include nth-omega(2n);
}
@include at-breakpoint($break-to-large) {
@include span-columns(5,25);
@include nth-omega(5n);
}
} //end .member
.member-title {
@include rhythm(0,.25,.25,0,16px);
border-top-left-radius: .75em;
border-top-right-radius: .75em;
border-bottom: .1em solid rgba($green, .4);
background: lighten($yellow, 34%);
}
.member-logo {
@include rhythm(0,1,1,0,16px);
max-width: 96%;
height: 100% !important;
}
.member-content {
position: absolute;
width: 100%;
bottom: 0;
@include rhythm(0,0,1,0,16px);
font-weight: bold;
}
} // end #member-frontpage
哈克解决方案是.member element
从父母的 .scss 巢中删除从手机到平板电脑的中断。