CSS 기본 격자 : 표제 및 배치

Question

CSS/SASS에서 견고한 기준선 격자를 만드는 데 필요한 수학을 이해하려고합니다.

지금까지 텍스트를 주어진 페이지에 대한 격자로 설정할 수 있지만 머리글이 길이가 바뀌고 줄 감에 따라 다음 요소는 모두 격자에서 벗어납니다. 이 SASS 코드와 함께

<h1>A big greyish rounded bulk, the size, perhaps, of a bear, was</h1> 
<p>A big greyish rounded bulk, the size, perhaps, of a bear, was rising slowly and painfully out of the cylinder. As it bulged up and caught the light, it glistened like wet leather.</p> 
<p>Two large dark-coloured eyes were regarding me steadfastly. The mass that framed them, the head of the thing, was rounded, and had, one might say, a face. There was a mouth under the eyes, the lipless brim of which quivered and panted, and dropped saliva. The whole creature heaved and pulsated convulsively. A lank tentacular appendage gripped the edge of the cylinder, another swayed in the air.</p> 

:

이 간단한 HTML 코드를 가지고 당신이 볼 수 있듯이

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600"); 

// These are the basic values to set up a baseline & vertical rhythm 
$font-size: 16px; 
$line-height: 24px; 
$rhythm-unit: $line-height; 

html { 
    background-image: url(http://basehold.it/i/24); 
    font-family: "Open Sans"; 
    // Converting the font size to em 
    font-size: ($font-size/16px) * 1em; 
    // Converting the line height to a unitless number 
    line-height: $line-height/$font-size; 
} 

// Vertical rhythm & single margin direction 
h1, 
p { 
    margin-top: 0; 
    margin-bottom: $rhythm-unit; 
} 

h1 { 
    // Arbitrary values that look good 
    font-size: 3.375em; 
    line-height: 1.3; 

    // To now restore the baseline grid, we need to apply 
    // a margin bottom value that accomodates for font size 
    // and line height. 
    // 
    // Font size in px: 3.375 * $font-size = 54px 
    // The next multiple of our $rhythm-unit is 56. That 
    // means 2px need to be shifted. 
    // 2px in em: 2/54px = 0.03703703704; 
    margin-bottom: 0.03703703704em; 

    // Now that we have accomodated for font size, we need 
    // to do the same with line height. 
    // Line height in px: 1.3 * 54px = 70.2px 
    // The next multiple of our $rhythm-unit is 72. That 
    // means 1.8px need to be shifted. 
    // 1.8px in em: 1.8/54px = 0.03333333333; 
    margin-bottom: 0.03703703704em + 0.03333333333em; 
} 

, 나는 무겁게 댓글을 달았가 Live Example을 이해하기 쉽게 희망.

OK

NOT이 예에서 확인

효과 :

그냥 <h1>의 길이를 변경하고 다음 단락에 무슨 모양, 동작 설명 참조하십시오 최소일지도 모르지만, 더 긴 원본을 위해 그것은 강하고 더 강하게 교대하는 것을 시작한다.

정말 여러 줄 제목 또는 한 줄 제목에 대해 작동하는 이유를 이해할 수 없습니다. 그러나 훨씬 더 중요한 : 그들에

• 모든 텍스트 관련 측정 일부 배수 등
사항을 지키지 않아 자유롭게 설정할 수
• font-size & line-height 필요 : 내 요구 사항 다음은 기준선 격자를 설정도 가능
• line-height은 단위가 필요하지 않습니다.
• 제목이나 단락이 줄 바꿈 정도를 알 수 없습니다.

Answer 1

고맙게도이 수학은 당신을 위해 계산되었습니다. 당신은 할 수 있습니다

• 사용 Compass' vertical rhythm mixins
• 사본 compass' vertical rhythm source code (또는 일부) 프로젝트에의
• 또는 사용할 수있는 여러 옵션 중 하나를 체크 아웃 행운

http://bower.io/search/?q=vertical%20rhythm을 통해!