부르봉 왕가가 내 모바일 우선 설정에서 예상대로 작동하지 않습니다.

Question

처음으로 버번을 사용하고 있는데, 예상대로 작동하지 않습니다. 아마도 잘못된 것을 설정했을 것입니다.

저는 모바일 우선을 개발 중이므로 레이아웃이 내 바탕 화면 중단 점과 큰 중단 점 사이에서 동일하게 유지 될 것으로 기대합니다 (스타일이 다음 중단 점까지 계단식으로 배치되도록). 그러나 더 큰 중단 점에서 스타일을 다시 재정의하지 않으면 내 레이아웃이 모바일 레이아웃으로 돌아갑니다.

// Neat Overrides 
    $grid-columns: 4; 
    $max-width: 90%; 

    // Breakpoints 
    $first-breakpoint-value: 641px; 
    $second-breakpoint-value: 1024px; 
    $third-breakpoint-value: 1440px; 
    $fourth-breakpoint-value: 1920px; 

    $tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8); 
    $desktop: new-breakpoint(min-width em($second-breakpoint-value + 1) max-width em($third-breakpoint-value) 12); 
    $large: new-breakpoint(min-width em($third-breakpoint-value + 1) max-width em($fourth-breakpoint-value) 12); 
    $xlarge: new-breakpoint(min-width em($fourth-breakpoint-value +1) 12); 

그런 다음 내 요소는 다음과 같습니다

:

.container { 
    @include outer-container; 

    .swatch { 
    // mobile styles (here my swatch has a width of 100%) 
    border: 1px solid #000; 
    text-align: center; 
    margin-bottom: $gutter; 

    //MEDIA QUERIES 
    @include media($tablet) { 
     @include span-columns(4); 
     @include omega(2n); 
    } 

    @include media($desktop) { 
     @include span-columns(3); 
     @include omega(4n); 
     padding: 2em -0px; 
    } 

    @include media($large) { } 

    @include media($xlarge) { } 
    } 
} 

가 지금은 스타일을 기다리고 있었다 여기

내가 내 기본/_grid-settings.scss 내 중단 점을 정의한 방법입니다 내 $desktop 미디어 쿼리가 모두 $xlarge 미디어 쿼리까지 캐스케이드 처리되지만 현재 .swatch 요소는 $large 및 $xlarge에있는 부모 컨테이너의 100 %로 다시 돌아갑니다 중단 점. 내가 잘못 했나요? 스타일을 계단식으로 배열하려면 모든 중단 점에 대해 동일한 코드를 반복해서 반복하지 않아야합니다.

Answer 1

감사 @nickspiel - 절반의 대답이었다! 당신은 옳다. breakpoint 만있는 min을 추가하는 것은 breakpoint를 캐스케이드하는 스타일을 얻는 방법이다. Bourbon Neat과 omega을 사용하는 요소를 사용하면 조금 더 까다 롭습니다.

1. 를 사용하여 미디어 쿼리 분할, as per the docs,하지만 당신은 모든 브레이크 포인트 스타일을 설정해야합니다

   내가이 개 선택이 보인다.

2. 최소 너비의 중단 점을 Omega reset과 함께 사용하십시오 -이 옵션을 사용할 예정입니다.

Answer 2

미디어 쿼리 범위를 정의하는 중입니다. 그 이유는 미디어 쿼리 범위를 사이에있는 모바일보기로 다시 스냅하는 이유입니다.

중단 점에서 최대 값을 제거하면 값이 바탕 화면까지 연속적으로 나타납니다.

임 너무 깔끔하게 잘 알고 있지만, 다음과 같은 일을해야하지 :

$tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8); 

가된다 :

$tablet: new-breakpoint(min-width em($first-breakpoint-value) 8); 

Answer 3

희망이 있으면이 게시물을 읽는 데 도움이 될 것입니다. 비슷한 문제가있어서이 편리한 오메가 재설정 믹스를 발견했습니다. 모바일 먼저, 최대 폭을 정의하는 것 같습니다

http://www.joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat