CSS 글꼴 단위와 글꼴 응답성 구현의 차이점

다음은 CSS 글꼴 단위의 차이점과 반응형 글꼴 구현에 대한 자세한 설명입니다. 내용이 꽤 괜찮아서 지금 공유하고 참고용으로 드리고 싶습니다.

문제 시나리오:

반응형 레이아웃을 구현하는 과정에서 다양한 창 크기의 글꼴 크기와 다양한 모바일 장치의 가독성을 설정하는 방법은 무엇입니까?

알아야 할 사항은 다음과 같습니다.

1. px, em, pt
1em = 16px
1px = 1/16 em = 0.0625em

////다음은 덜 사용되는 관계입니다.//////
1em = 12pt
1px = 3 /4 pt = 0.75pt
1pt = 1/12 em 0.0833em
1pt = 4/3 px = 1.3333px

2 모든 브라우저의 기본 글꼴은 16px입니다. 조정되지 않은 모든 브라우저의 기본 크기는 1em=16px

3입니다. Chrome에서는 최소 글꼴을 12px로 설정하더라도 결국 12px로 표시됩니다. 이는 때때로 ie 또는 mozllia의 글꼴 크기가 chrome

4의 글꼴 크기와 다른 이유를 설명합니다. px, em, rem vw, vh, vmin의 차이점은 무엇입니까?

px:

상대 단위. 화면 해상도와 관련됩니다. 이것이 해상도가 높을수록 글꼴 크기가 작아지는 이유입니다. 그렇다면 px의 장점과 단점은 무엇일까요?

장점: 비교적 안정적이고 정확합니다.

단점: 페이지 크기가 조정되면 텍스트의 가독성이 영향을 받습니다. 이 문제는 em을 글꼴 단위로 사용하면 해결될 수 있습니다.

em:

상대 단위. 기준값을 기준으로 글꼴 크기를 조정하는 것은 특정 값이 아닌 상대적인 값입니다. 기본 값은 상위 요소에 의해 설정된 글꼴 크기에 따라 달라집니다. 상위 요소가 글꼴 크기를 설정하지 않은 경우 루트 노드까지 위쪽으로 검색합니다.

장점: px의 단점을 보완합니다.

단점: 상위 노드에 너무 많이 의존하고 글꼴 크기 선언이 반복되기 쉽습니다.

rem:

상대 단위. 루트 노드 html을 기준으로 한 글꼴 크기입니다.

단점: 상위 요소의 글꼴 크기에 대한 em의 의존성을 방지합니다.

장점: 루트 노드 글꼴 크기

<SPAN style="FONT-SIZE: 16px">html{font-size:100%}    
//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1rem;} }    
@media (min-width:960px) { body {font-size:1.2rem;} }    
@media (min-width:1100px) { body {font-size:1.5rem;} }    
</SPAN>

5라는 하나의 참조 시스템만 있습니다. 루트 노드 글꼴 크기를 62.5%로 설정해야 하는 이유는 무엇입니까?

위에서 언급했듯이 브라우저의 기본 글꼴 크기는 16px입니다. 다양한 페이지 크기에서 글꼴 크기를 12, 14, 18px로 설정하고 싶다면 어떻게 해야 할까요?

글꼴의 상대적 크기를 계산하려면 12/16 rem, 14/16rem, 18/16rem을 사용해야 합니까?

더 간단한 방법은 루트 노드에서 글꼴 크기를 10px로 설정하는 것입니다. 미디어는 1.2rem, 1.4rem, 1.8rem으로 직접 쓸 수 있습니다. 루트 노드가 10px로 설정된 경우 브라우저의 기본 글꼴 크기를 기준으로 한 글꼴 크기는 글꼴 크기: 10/16%, 즉 글꼴 크기: 62.5%

<SPAN style="FONT-SIZE: 16px">html{font-size:10px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1m=1.2 rem;font-size:12px;  /某些浏览器不支持rem/} }    
@media (min-width:960px)  { body {font-size:1.4 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:1.8 rem; font-size:18px; /*同上*/} }    
</SPAN>

<SPAN style="FONT-SIZE: 16px">html{font-size:16px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:12/16 rem;font-size:12px;  /某些浏览器不支持rem，需要再次使用px 声明font-size/} }    
@media (min-width:960px)  { body {font-size:14/16 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:18/16 rem; font-size:18px; /*同上*/} }    
</SPAN>

위 내용은 전체 내용입니다. 이 글이 모든 분들의 공부에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

css를 사용하여 영어 단어 줄 바꿈을 강제하는 코드

css div로 구현된 마스크 레이어는 IE6-IE9 및 FireFox 브라우저와 호환됩니다

위 내용은 CSS 글꼴 단위와 글꼴 응답성 구현의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!