[CSS] 화면 크기에 따라 폰트사이즈 조정하기

 

팀프로젝트 중.. 다른 조원분의 화면으로 작업물을 보며 논의하다가 내가 만든 타이틀 속 글자들이 섞이는 걸 발견했다.

팀원분이 반응형웹 폰트 설정을 찾아보라고 팁을 주셔서 빠르게 적용할 수 있었다!

 

 

미디어쿼리

다양한 디바이스의 뷰포트에 대응하기 위해 사용할 수 있다.

@media 키워드로 시작하며, 조건에 해당하는 경우에 적용할 스타일을 지정한다.

@media (조건) {
	// 스타일
}

생각보다 간단하게 설정할 수 있었다.

 

@media screen and (max-width: 1800px) {
  .title p {
    font-size: 5rem;
  }
}

@media screen and (max-width: 1200px) {
  .title p {
    font-size: 3rem;
    height: 5rem;
  }
}

@media screen and (max-width: 600px) {
  .title p {
    font-size: 2rem;
    height: 3rem;
  }
}

위 내용을 추가해주었다.

 

 

너비를 나누는 기준

최소 반응형 레이아웃

• 가장 심플하게 나누는 경우
• 모바일: ~768px
• 타블렛: ~1024px
• 데스크탑: 1024 ~

 

가로모드 디바이스 지원 반응형 레이아웃

• 디바이스 사용환경을 최대한 고려한 레이아웃
• 모바일: ~600px
• 모바일 가로, 타블렛 세로: ~900px
• 타블렛 가로: ~1200px
• 데스크탑: ~1800px
• 빅 데스크탑: ~2000px

 

위 기준은 반드시 맞춰야하는 것은 아니다!