풀페이지 모바일 환경에서 폰트크기 em 사용 / em의 쓰임

모바일 환경에 따라 글씨를 조절해주면 

숫자부분이 깨진다.

 

 

.main_about .about .number .number_list {
  font-size: 8rem;
  font-weight: 700;
  display: flex;
  /* height: 116px; */
  height: 1.44em;
  overflow: hidden;
  align-items: flex-start;
  border: 1px solid red;
}

 

기존에 px 로 잡혀있기 때문에 크기가 줄어들면 숫자 부분이 깨진다.

이떄 단위에 맞춰 em 으로 변경해준다. 

 

노토산스폰체는 줄 간격이 1.44 이므로 1.44em 단위를 적용해준다. 

 

---

단 크기를 줄였을때 숫자 부분이 어그러지며 82% 단위가 나오지않는다

이유는 기존 116px 로높이가 고정되어있어

어그러졌기때문 

 

숫자 애니메이션 에도 적용되어있던 px 단위를 em 으로 변경해준다

 

/* 숫자 애니메이션 */
@keyframes moveNumber {
  0% {
    /* transform: translateY(calc(-100% + 116px));*/
    /* em 은 폰트크기를 따라가기 때문에 모바일에서 같이 줄어들도록 조정*/
    /* 폰트크기를 기준으로 할 경우 */
    transform: translateY(calc(-100% + 1.44em));
  }
  100% {
    transform: translateY(0);
  }
}
.main_about .about .number .number_list .left {
  transform: translateY(0);
}
.main_about.active .about .number .number_list .left {
  animation: 3s moveNumber forwards;
}

@keyframes moveNumber2 {
  /* 0을 안하면 스크롤이 넘어갈때 시작위치가 변경됨 */
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 1.44em));
  }
}
.main_about .about .number .number_list .right {
  transform: translateY(calc(-100% + 1.44em));
}
.main_about.active .about .number .number_list .right {
  animation: 3s moveNumber2 forwards;
}

 

 

---

단위를 변경해주었을때 크기에 맞춰 줄어듦 확인