[css] 사용자의 화면 해상도에 상대적인 글꼴 크기?

Program / 글쓴이

유동적 인 웹 사이트가 있고 메뉴는 너비의 20 %입니다. 메뉴의 글꼴 크기를 적절하게 측정하여 항상 상자 너비에 맞고 다음 줄로 줄 바꿈하지 않기를 바랍니다. “em”을 단위로 사용하려고 생각했지만 브라우저의 글꼴 크기에 상대적이므로 해상도를 변경할 때 글꼴 크기는 동일하게 유지됩니다.

점수와 백분율도 시도했습니다. 필요한만큼 작동하지 않습니다 …

진행 방법에 대한 힌트를주세요.

답변

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

화면의 화면 크기에 따라 수동으로 부여 할 수 있으며 화면 크기를 다르게보고 글꼴 크기를 직접 추가하면됩니다.

답변

당신이 사용할 수있는 em, %, px. 그러나 media-queries See this Link 와 함께 사용 하면 미디어 쿼리에 대해 알아볼 수 있습니다. 또한, CSS3는 현재 뷰포트의 크기를 기준으로 물건을 크기에 대한 새로운 값이 : vw, vh,와 vmin. 그것에 대한 링크 를 참조하십시오 .

답변

새로운 방식

이를 달성하는 방법에는 여러 가지가 있습니다.

CSS3 는 뷰포트와 관련된 새로운 차원을 지원합니다. 그러나 이것은 안드로이드에서 작동하지 않습니다.

  1. 3.2vw = 뷰포트 너비의 3.2 %
  2. 3.2vh = 뷰포트 높이의 3.2 %
  3. 3.2vmin = 3.2vw 또는 3.2vh 중 더 작음

  4. 3.2vmax = 3.2vw 또는 3.2vh 중 더 큼

    body
{
    font-size: 3.2vw;
}

css-tricks.com / …. 참조 및 caniuse.com / …. 참조

올드 웨이

  1. 미디어 쿼리를 사용 하지만 여러 중단 점에 글꼴 크기가 필요합니다.

    body
{
    font-size: 22px;
}
h1
{
   font-size:44px;
}

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

  2. % 또는 rem의 차원을 사용하십시오 . 기본 글꼴 크기 만 변경하면 모든 것이 변경됩니다. 이전 버전과 달리 매번 h1이 아닌 본문 글꼴을 변경하거나 기본 글꼴 크기를 장치의 기본값으로 설정하고 모두 em에 둘 수 있습니다.

    • “Root Ems”(rem) : “rem”은 확장 가능한 단위입니다. 1rem은 body / html의 글꼴 크기와 같습니다. 예를 들어 문서의 글꼴 크기가 12pt이면 1em은 12pt와 같습니다. 루트 Em은 본질적으로 확장 가능하므로 2em은 24pt, .5em은 6pt 등입니다.

    • 백분율 (%) : 백분율 단위는 몇 가지 근본적인 차이점을 제외하면 “em”단위와 매우 유사합니다. 무엇보다도 현재 글꼴 크기는 100 %입니다 (즉, 12pt = 100 %). 백분율 단위를 사용하는 동안 텍스트는 모바일 장치 및 접근성을 위해 완전히 확장 가능합니다.

kyleschaeffer.com / …. 참조

답변

전적으로 반응하는 HTML (예 : 백분율로 작성된 HTML)에 적합한 멋진 JS 솔루션을 개발했습니다.

  1. 글꼴 크기를 정의하기 위해 “em”만 사용합니다.

  2. html 글꼴 크기는 10 픽셀로 설정됩니다.

    html {
  font-size: 100%;
  font-size: 62.5%;
}

  3. 문서 준비에서 글꼴 크기 조정 함수를 호출합니다.

// JQuery가 필요합니다.

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}

답변

이 도구를 사용해 볼 수 있습니다 : http://fittextjs.com/

이 두 번째 도구를 사용하지 않았지만 비슷해 보입니다 : https://github.com/zachleat/BigText

답변

왜 이것이 복잡한 지 잘 모르겠습니다. 이 기본 자바 스크립트를 할 것입니다

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

12는 1280 해상도에서 12px를 의미합니다. 여기서 원하는 값을 결정합니다.

답변

이것은 나를 위해 일했습니다.

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

여기에 자세히 설명되어 있습니다 :
https://css-tricks.com/books/volume-i/scale-typography-screen-size/