2013-03-04 2 views
2

나는 zurb foundation 4 프레임 워크로 새로운 sass 프로젝트를 만들 때 compass을 사용했습니다. 내 screen.scss 파일은 다음과 같습니다기초 대형 스크린을위한 4 개의 응답 격자 레이아웃

// Reset and normalization settings 
@import "normalize"; 

// Global Foundation Settings 
@import "settings"; 

// Comment out this import if you are customizing you imports below 
@import "foundation"; 

기본 설정은 다음 줄을 포함

$row-width: 62.5em; 

그것은 우리의 그리드 행이 적어도 768px입니다 화면에 대한 1000px (62.5em)이어야한다는 것을 의미한다.

하나 이상의 미디어 조건을 추가하는 적절한 방법은 최소 1280px 인 화면에 대해 $row-width 변수를 최대 75em (1200px)까지 증가시킬 수 있습니까?

+0

https://github.com/zurb/foundation/blob/master/scss/foundation/components/_visibility.scss 내가 같은 문제가, 내가 얻을 것이라고 생각 또한,이 답변을보고, 난 그냥 그것을 조금 수정 부트 스트랩으로 돌아 가기 ... – Vishalgiri

답변

11

과 같이 app.scss에서 셀에만에 대한 중단 점을 만듭니다

.row{ 
    @media #{$medium} { 
     max-width: 75em; 
    } 
} 

재단은 예를 들어 $ 매체 _visibility.scss에서 미디어 쿼리에 사용되는 화면 크기에 대한 변수가가 "단지 화면을 변환

와 (최소 너비 : 80em) ". 아직 시도하지는 않았지만 작동해야합니다. 이 https://stackoverflow.com/a/14247136/961064

당신은 _visibility.scss에 서로 다른 화면 크기에 대한 다른 변수를 찾을 수 있습니다 :

+0

대단히 감사합니다, 올라프! –

+5

다행 난 도움이 될 수 Stackoverflow에 대한 내 첫 번째 답변이었다 :) –

+0

안녕! 이것은 잘 작동하지만 탐색 (상단 표시 줄)은 이전 규칙으로 계속 진행됩니다. 어떻게 해결할 수 있습니까? – fenixkim