관련 글꼴 크기 및 블록 폭 감지

Question

유체 레이아웃 및 크기 조정 텍스트 웹 페이지의 스타일을 지정할 때 현재 스타일 요소의 관련 글꼴 크기 (em의 단위)와 블록 폭 (퍼센트 단위)을 항상 염두에 두어야합니다 . 이는 항상 부모 요소의 너비가 무엇인지 또는 현재 요소 나 그 조상 중 하나의 글꼴 크기를 수정 한 경우에주의해야 할 시간입니다.

다이나믹 스타일 시트 (예 : Sass 이하)는 em과 백분율 계산 (간단한 사단) 뒤에있는 수학에주의를 기울이는 믹스 인 또는 함수를 구현하기 쉽기 때문에 크기를 픽셀로 쓰고 번역을 잊어 버릴 수 있습니다. 하지만 어쨌든 관련 글꼴 크기를 제공하고 블록 너비를 조정하면 자동 숨길 방법이 없기 때문에 내가 아는 범위 내에서 차단 너비를 조정해야합니다.

자동화를위한 몇 가지 유틸리티가 있는지 알고 있습니까? 어떤 방법으로 그것을 성취하기 위해 어떤 노력이 있었습니까?

Answer 1

부모의 계산 된 속성 값을 사용하여 CSS에서 자식의 속성을 설정할 수 없습니다. 덜 또는 SASS는 그것을 변경하지 않습니다. 그러나 크기는 부모 (또는 rem 단위를 사용할 때 루트)에 상대적으로 설정할 수 있습니다.

>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size) 

관련 글꼴 크기는 부모의 글꼴 크기 설정입니다. 하위 요소의 글꼴 크기를 0.5em으로 정의하면 글꼴 크기가 부모 글꼴 크기보다 50 % 작아집니다.

Less/SASS를 사용하여 0.5em을 변수로 선언 할 수 있습니다. 한 곳에서 변경하고 편집 할 수 있습니다.

@basefont: 1em; 
@smallfont: 0.5em; 

section { 
font-size: @basefont; 
article { 
font-size: @smallfont; // or @basefont/2; 
} 
} 

footer { 
font-size: @smallfont; 
} 

이하 및 수평 공간 (폭 pagging 왼쪽 패딩 우측) (용기 블럭 너비이므로 상대>) 비율 단위이다.

퍼센트 단위는 이미 부모 (블록 포함)를 기준으로합니다.