REM 수면에 대한 이해와 응용 프로그램 단위

이해 :

HTML 폰트 크기 단위의 폰트 크기에 대해
폰트 크기 15 픽셀의 크기, 다음 1rem = 15 픽셀

응용 프로그램 :

주로 다른 화면 해상도, 즉, 적절한 크기의 폰트 높이와 다양한 화면 크기의 폭 등의 디스플레이에 적용되기에 적합

　　그럼, 어떻게 다른 해상도의 폰에 맞게해야합니까?

　　적응 모드 :

미디어 문의

　미디어 문의 + 렘

@media 화면 (최소 폭 : 360 픽셀) {{HTML 폰트 크기 : 19 .2px;}} 
@media 스크린과 (최소 - 폭 : 375px) {{HTML font- 크기 : 20 픽셀;}} 
@media 화면 및 (최소 - 폭 : 400 픽셀) {{HTML 폰트 크기 : 21 .33333px;}} 
@media 스크린과 (최소 - 폭 : 414px) {{HTML 폰트 크기 : 22 .08px;}} 
@media 스크린과 (최소 - 폭 : 440px)를 HTML {{폰트 크기 : 23 .46666px;}} 
@media 스크린과 (최소 - 폭 : 480 픽셀) {{HTML 폰트 크기 25 .6px;}} 
@media 스크린과 (최소 -width : 520px) {{HTML 폰트 크기 : 27 .73333px;}} 
@media 스크린과 (최소 - 폭 : 560px) {{HTML 폰트 크기 : 29 .86666px;}} 
@media 스크린과 (최소- 폭 : 600 픽셀)를 HTML {{font- 크기 : 32px;}} 
@media 스크린과 (최소 - 폭 : 640) {{HTML 폰트 크기 : 34 .13333px;}} 
@media 스크린과 (최소 - 폭 : 680 픽셀 ) {{HTML 폰트 크기 : 36 .26666px;}} 
@media 스크린과 (최소 - 폭 : 720px) {{HTML 폰트 크기 : 38 .4px;}} 
@media 스크린과 (최소 - 폭 : 750px) { HTML {font- 크기 : 40px;}} 
@media 스크린과 (최소 - 폭 : 760px) {{HTML font- 크기 : 40px;}} 
@media 스크린과 (최소 - 폭 : 800 픽셀) {{HTML font- 크기 : 40px;}} 
@media 스크린과 (최소 - 폭 : 960) {{HTML 폰트 사이즈 : 40px;}}

JS 수정 된 HTML + REM의 크기를 동적 폰트 크기를 사용하도록
- ```
// 视口设置 
<메타 이름 = "뷰포트"내용 = "초기 스케일 = 1, 최대 스케일 = 1, 최소 크기 = 1"> VAR deviceWidth = document.documentElement.clientWidth;
경우 (deviceWidth> 640) deviceWidth = 640 ; 
document.documentElement.style.fontSize = deviceWidth / 6.4 + '픽셀';
```
- 640보다 화면 해상도 큰 경우, 장치 640 화면 카운트 6.4 우리는 기준으로서 640 화면 가정 것을 나타내고, 100 픽셀의 폰트 크기, 화면의 전체 폭의 크기 6.4rem (640 / 100 픽셀 = 6.4 REM) 상이한 화면 아래 폰트 크기이어서 6.4 등급에 기초하여 계산

Taobao의 JS의 폰트 사이즈 + REM 달성

VAR의 배율 = 1 / devicePixelRatio; 
document.querySelector ( '메타 [NAME = "뷰포트"]).의 setAttribute ('내용 ','초기 스케일 = '+ 스케일 +', 최대 스케일 = '+ 스케일 +', 최소 크기 = '+ 스케일 + '사용자 확장 = 없음 " );하지 

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + '픽셀'

화면 크기가 10 개로 분할되고, 주로, 폰트 크기는 1/10 화면의 크기이다.

　　https://blog.csdn.net/qq_34020571/article/details/78923089

REM 수면에 대한 이해와 응용 프로그램 단위

추천