1
CSS/SASS에서 견고한 기준선 격자를 만드는 데 필요한 수학을 이해하려고합니다.CSS 기본 격자 : 표제 및 배치
지금까지 텍스트를 주어진 페이지에 대한 격자로 설정할 수 있지만 머리글이 길이가 바뀌고 줄 감에 따라 다음 요소는 모두 격자에서 벗어납니다. 이 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은 단위가 필요하지 않습니다.- 제목이나 단락이 줄 바꿈 정도를 알 수 없습니다.
우선 "확인"스크린 샷과 "확인하지 않음"스크린 샷의 차이점을 볼 수 없습니다. 그러나 바보 같은'font-size : ($ font-size/16px) * 1em; '을 없애고 크기를 원하는 픽셀로 씁니다. (그 중 하나 또는 사용자의 기본 설정을 존중하고 글꼴 크기를 전혀 변경하지 마십시오!) –