+isolate-gridSusy mixinを使用してサブピクセルの丸めの問題を修正し、サムネイル ギャラリー グリッドの 1 行に 4 つのタイルを表示する必要がありました。
今、私は問題に直面してい+isolate-gridます。ファイルのデフォルトのモバイル スタイル セクションでを適用+isolate-grid(2,4)すると、他の 2 つのブレーク ポイント :と..tilestyle.sasstabletdesktop
モバイルのデフォルト状態のタイル グリッドは問題ないように見えます。
モバイル (デフォルト)
desktopしかし、との状態のタイル グリッドtabletは一貫していません。1 行に 3 つのタイルが必要です。今ではランダムに見えます：
タブレット
デスクトップ
デフォルトのモバイル スタイルで inに置き換える+isolate-grid(2,4)と。その後、状態と状態は正常に機能しますが、モバイル状態のタイルは行ごとに 1 つしかありません。行ごとに 2 つのタイルが必要です。+span-columns(2).tiletabletdesktop
モバイル (デフォルト)
タブレット
デスクトップ
コードは次のとおりです。
@import compass
@import susy
@import normalize
$total-columns : 4
$column-width : 60px
$gutter-width : 20px
$grid-padding : $gutter-width
$container-style: fluid
$tablet : 9
$desktop : 14
// Susy-grid-background override to draw out horizontal lines
=susy-grid-background
+grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)
$base-font-size: 18px
$base-line-height: 30px
+establish-baseline
ul
background-color: rgb(111, 50%, 250)
li
background: rgba(200,50,0,.2)
text-align: right
img
width: 100%
h1
+adjust-font-size-to(90px)
+adjust-leading-to(4, 90px)
+leader(2, 90px)
background: rgb(0,20,200)
h1#logo
+adjust-font-size-to(30px)
+adjust-leading-to(2, 30px)
+leader(0, 30px)
h2
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
p
+leader(1)
+trailer(1)
.page, header, .pagenav, .main, .pagefoot
+transition(all .3s ease)
/* 5 Column Layout */
.page
+container($total-columns, $tablet, $desktop)
+susy-grid-background
/* ------------------- BREAKPOINTS ---------------------------- */
/* ------------------- MOBILE (default) ------------------------*/
p
+leader(0)
header
+container
position: fixed
left: 0
right: 0
bottom: 0
height: 2.3em
background: rgba(250,250,250,.7)
h1#logo a
+hide-text
float: right
+span-columns(1)
background: red
.navicon
+span-columns(1)
background: green
.pagenav
+span-columns(4)
background: rgba(150,200,250,.3)
ul
background: #ffccff
li
text-align: left
.main
+span-columns(4)
margin-top: 1em
background: rgba(1,240,200,.3)
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* Here is where the problem happens ..............................................*/
/* +isolate-grid(2,4) messes up the tile flow in the tablet and desktop states.....*/
/* +span-columns(2) messes up the tile flow in the mobile state....................*/
.tile
+isolate-grid(2, 4)
// +span-columns(2)
height: 206px
margin-bottom: 1em
background: cyan
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* >>>>>>>>>>>>>>>> PROBLEM AREA <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.tile_title
+adjust-font-size-to(15px)
+adjust-leading-to(1, 15px)
background: #af6
.tile_use
@extend .tile_title
+adjust-font-size-to(10px)
+adjust-leading-to(1, 10px)
/* ------------------- TABLET ----------------------------------*/
+at-breakpoint($tablet)
.page
+container
+susy-grid-background
p
+leader(0)
header
+container
position: fixed
left: 0
right: 0
bottom: 0
height: 2.3em
background: rgba(250,250,250,.7)
h1#logo a
+hide-text
float: right
+span-columns(2)
background: red
.navicon
+span-columns(1 omega)
background: green
.pagenav
+span-columns(2 omega,9)
background: rgba(150,200,250,.3)
ul
background: #ffccff
li
text-align: left
.main
+span-columns(9)
margin-top: 1em
img
+span-columns(7, 9)
.tile
+isolate-grid(3, 9)
height: 304px
margin-bottom: 1em
background: cyan
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
@extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)
/* -------------------DESKTOP ----------------------------------*/
+at-breakpoint($desktop)
.page
+container
+susy-grid-background
header
+container
position: fixed
left: 0
right: 0
top: 0
height: 0
z-index: 3
h1#logo a
+hide-text
float: right
+span-columns(2)
background: red
.pagenav
clear: both
float: right
+span-columns(2)
background: rgba(150,200,250,.3)
.main
+span-columns(12 omega)
+leader(2)
z-index: 1
position: relative
background: rgba(1,240,200,.3)
img
+span-columns(10, 14)
.tile
+isolate-grid(4, 12)
height: 304px
margin-bottom: 1em
.tile_title
+adjust-font-size-to(25px)
+adjust-leading-to(1, 25px)
background: #af6
margin: 10px
padding: 5px
.tile_use
@extend .tile_title
+adjust-font-size-to(20px)
+adjust-leading-to(1, 20px)