Bourbon 깔끔한 프레임 워크로 모바일을 처음 수행하는 방법

Question

나는 잘 작동하는 데스크톱 첫 레이아웃을 수행하기 위해 버번을 깔끔하게 사용 해왔다.

그러나 모바일로 시작하여 내 방식대로 작동하는 모바일 버전을 만들고 싶습니다. 기본 그리드 12 열 및 모바일 일반적으로 4 눈금을 사용합니다. 내 눈금을 4 changeline 시도하고 최대 12 스케일링하지만이 작동하지 않았다.

표준 데스크톱 레이아웃을 만드는 것보다 모바일을 먼저 수행 한 다음 모바일 미디어 쿼리를 각 CSS 선택기에 넣고 모바일 버전으로 시작하여 방법을 구축하는 것이 더 좋은 방법일까요?

Answer 1

Neat에서 new-breakpoint mixin으로 새 중단 점을 만들어야합니다. 그러나 예제에서와 같이 max-width를 사용하는 대신 min-width를 사용할 수 있습니다. 예를 들어

: 예제 .main에서

@import "bourbon/bourbon"; 
@import "neat/neat"; 

$mobile: new-breakpoint(min-width 0px 4); 
$tablet: new-breakpoint(min-width 760px 8); 

.main { 
    background: grey; 

    @include media($mobile) { 
    @include span-columns(4); 
    background: white; 
    } 

    @include media($tablet) { 
    @include span-columns(8); 
    background: black; 
    color: white; 
    } 
} 

흰색 배경을 가지고 있고 4 열에서 구성됩니다. 뷰포트의 너비가 최소 760 픽셀이면 검정색 배경이되고 8 열을 스팬합니다.

Answer 2

나는 케네스 오만 디 (Kenneth Ormandy)의 Chasers을 사용합니다. omega-reset(xn)은 이전 미디어 쿼리의에서 "xn"을 전달하는 것을 포함합니다. 그는 github repo에 대한 많은 설명서를 제공하며 Bower 또는 NPM을 사용하여 쉽게 설치할 수 있습니다.

Answer 3

Jorn의 답변을 확장하려면 ... 기본값으로 설정된 데스크톱 번호가 아니라 $grid-columns 변수를 모바일 너비 번호로 설정해야합니다.

@import "../neat/neat-helpers"; 

// Neat Overrides 
$column: golden-ratio(1em, 3); 
$gutter: golden-ratio(1em, 1); 
$grid-columns: 6; 
$max-width: em(1280); 


// Neat Breakpoints 
$mobile-large-screen: em(480); 
$tablet-small-screen: em(560); 
$medium-screen: em(640); 
$medium-large-screen: em(750); 
$large-screen: em(860); 
$x-large-screen: em(970); 
$xx-large-screen: em(1088); 
$super-large-screen: em(1280); 

$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6); 
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6); 
$medium-screen-up: new-breakpoint(min-width $medium-screen 12); 
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12); 
$large-screen-up: new-breakpoint(min-width $large-screen 12); 
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12); 
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12); 
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12); 

당신은 내가 새로운 브레이크 포인트를 많이 만들었와 반대로 내가 이동 폭에서 6 COLS를 사용하고 볼 수 있습니다 :이 _grid_settings.scss 파일이 프로젝트에 대해 내가 현재 일하고 있어요 모습입니다 4 원래 깔끔한 설정에서 (필자는 프로젝트에서 어떤 일을했는지 ​​필요하다). 자신의 프로젝트에서 작동하도록이 설정을 조정해야합니다. 테이크 어웨이는 내가 $grid-columns 변수를 무시하고 새로운 중단 점을 만드는 것이다. 또한 _grid_setting.scss을 가져 오기 전에 꼭 가져 오십시오.

@import "bourbon/bourbon"; 
@import "grid_settings"; 
@import "neat/neat";