버번 깔끔한 방법 Omega()

Question

현재 모바일, 태블릿 및 데스크톱에서 다른 레이아웃이 필요한 레이아웃 작업 중입니다.

1. 모바일-
누적
2. 태블릿 - 두 개의 열 레이아웃
3. 바탕 화면 - 내 두 개의 열 레이아웃은 모든 방법을 스틱 것을 찾는거야

세 열 데스크톱 레이아웃으로 옮겨야합니다. 그것은 타블렛 omega(2n) 내 바탕 화면 레이아웃까지 모든 방법을 스틱 것 ... omega(3n) 있어야합니다 - 나는 그것이 오메가 (2n)을 무시할 줄 알았는데. 어떻게 해결할 수 있습니까? 최대 값을 포함하도록 내 중단 점을 편집 할 수는 있지만 더 불필요하다고 판단되는 다리 작업이됩니다. 여기에 pen

HTML

<div class="boxes"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
</div> 

은 SCSS

$mq-s : em(400); 
$mq-m : em(768); 
$mq-l : em(960); 
$mq-xl: em(1700); 

// Breakpoints 
$mobile:   new-breakpoint(min-width $mq-s 6); 
$tablet:   new-breakpoint(min-width $mq-m 12); 
$desktop:   new-breakpoint(min-width $mq-l 12); 
$large-desktop:  new-breakpoint(min-width $mq-xl 12); 

.boxes{ 
    @include outer-container; 
} 

@include media ($tablet){ 
    li { 
    background: tint(red,50%); 
    margin-bottom: 20px; 
    @include span-columns(6); 
    @include omega(2n); 
    height: 40px; 
    } 
} 

@include media ($desktop){ 
    li{ 
     @include span-columns(4); 
     @include omega(3n); 
    } 
} 

Answer 1

하는 문제는 $ 태블릿 미디어 쿼리는 최대 폭이없는 것입니다은 충돌 여전히 수 있습니다 $ desktop 미디어 쿼리. 이처럼 최대 너비를 추가하면 원하는대로 작동합니다.

$tablet: new-breakpoint(min-width $mq-m max-width 959px 12); 

나는 쉽게 화면 크기에서 공유됩니다 이제이

li { 
    background: tint(red,50%); 
    height: 40px; 
    margin-bottom: 20px;  

    @include media($tablet){ 
    @include span-columns(6); 
    @include omega(2n); 
    } 

    @include media($desktop){ 
    @include span-columns(4); 
    @include omega(3n);  
    } 
} 

귀하의 색상, 높이 및 아래쪽 여백과 같은 요소 내에서 내 미디어 쿼리를 구성 찾을 열은 미디어 쿼리에 응답합니다. 모바일에 필요한 미디어 쿼리가 기본값이되므로 필요하지 않습니다.