[css] CSS의 반응 형 글꼴 크기

는 font-size브라우저 창 크기를 조정하는 경우 다음과 같이 응답하지 않습니다. 대신 그들은 그러한 누를 경우 같은 브라우저 줌 / 종류 크기 설정, 응답 Ctrl과 +함께하는 동안 브라우저에서 키보드.

미디어 쿼리

다음을 사용하여보고 할 것 미디어 쿼리를 그것이 당신의 디자인을 깨고 스크롤바를 만드는 시작하는 위치를 일정 간격으로 글꼴 크기를 줄일 수 있습니다.

예를 들어, CSS의 맨 아래에 이것을 추가하여 디자인이 깨지기 시작하는 곳의 너비를 320 픽셀로 변경하십시오.

@media only screen and (max-width: 320px) {

   body {
      font-size: 2em;
   }

}

뷰포트 백분율 길이

당신은 또한 사용할 수있는 뷰포트 비율 길이 등을 vw, vh, vmin와 vmax. 이 상태에 대한 공식 W3C 문서 :

뷰포트 백분율 길이는 초기 포함 블록의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.

다시, 동일한 W3C 문서에서 각 개별 단위를 다음과 같이 정의 할 수 있습니다.

vw 단위-초기 포함 블록 너비의 1 %와 같습니다.

vh 단위-초기 포함 블록 높이의 1 %와 같습니다.

vmin 단위-vw 또는 vh 중 작은 것과 같습니다.

vmax 단위-더 큰 vw 또는 vh와 같습니다.

그리고 다른 CSS 값과 정확히 같은 방식으로 사용됩니다.

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

여기에서 볼 수 있듯이 호환성은 비교적 좋습니다 . 그러나 일부 Internet Explorer 및 Edge 버전은 vmax를 지원하지 않습니다. 또한 iOS 6 및 7에는 vh 장치에 문제가 있으며 iOS 8에서 수정되었습니다.

답변

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

body {
  font-size: calc(0.75em + 1vmin);
}

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}