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


84

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

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

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

답변:


51
@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;
  }
}

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


16
중요 참고 : 이것을 html 헤드에 추가해야합니다. <meta name="viewport" content="width=device-width" /> 또한 더 '반응 형'느낌 max-width대신 사용할 수 있습니다 max-device-width.
Sheharyar

@ user65165 당신이 말하려는 것을 이해하지 못했습니다?
Arpit Srivastava

최대 장치 너비가 작동하지 않습니다. 브라우저 화면을 조정할 때 최대 너비 만 작동합니다.
Ramisa Anjum Aditi

54

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


28
vw, vh, vmin이 답변을 바위.
Frank Lämmer 2013 년

1
뷰포트 단위가 모든 * 브라우저에서 지원된다는 점을 감안하면 현재 정답입니다 : caniuse.com/#feat=viewport-units .
cazzer

잊지 마세요vmax
live2

31

새로운 방식

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

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 / .... 참조


글꼴 크기 : 3.2vw가 제 경우에는 작동했습니다. 브라우저 지원에 대해서는 확실하지 않습니다.
manpikin

"em은 현재 글꼴 크기와 같습니다. 예를 들어 문서의 글꼴 크기가 12pt이면 1em은 12pt와 같습니다." 실제로 em는 컨테이너의 글꼴 크기에 상대적입니다. 컨테이너에 글꼴 크기가 em...로 설정되어있을 때 예기치 않은 동작이 발생할 수 있습니다 rem. 문서 글꼴에 상대적인 크기를 가져 오려면을 사용하십시오 .
Stijn de Witt

19

전적으로 반응하는 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+'%');
}

흥미로운 솔루션은 나쁘지 않습니다. 나는 내가 사용하는 방법을 통해 배운 것을 테스트했지만 maxW 크기 창에서 10px 크기의 텍스트로 수정했지만 괜찮습니까? 하지만 이것은? "16"이 뭐야 이거 뭐야? var fpc = fw * 100 / 16;
Domenico Monaco


5

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

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

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



2

https://stackoverflow.com/a/17845473/189411 의 변형을 만들었습니다.

여기서 "확인"크기를 원하는 상자의 최소 및 최대 크기와 관련하여 최소 및 최대 텍스트 크기를 설정할 수 있습니다. 또한 텍스트 크기를 적용하려는 상자와 다른 dom 요소의 크기를 확인할 수 있습니다.

# size-2 요소의 500px 및 960px 너비를 기준으로 # size-2 요소에서 19px에서 25px 사이의 텍스트 크기를 조정합니다.

resizeTextInRange(500,960,19,25,'#size-2');

본문 요소의 500px 및 960px 너비를 기준으로 # size-1 요소에서 13px에서 20px 사이의 텍스트 크기를 조정합니다.

resizeTextInRange(500,960,13,20,'#size-1','body');

완전한 코드가 있습니다 https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});

1

미디어 쿼리를 사용 하지 않는 것은 글꼴 크기를 점차적으로 조정할 수 있기 때문에 좋습니다.

vw단위를 사용 하면보기 포트 크기에 비례하여 글꼴 크기가 조정됩니다.

vw단위를 글꼴 크기 로 직접 변환 하면 모바일 해상도와 데스크톱 모두에서 최적의 위치에 도달하기 어렵습니다.

다음과 같은 것을 시도하는 것이 좋습니다.

body {
    font-size: calc(0.5em + 1vw);
}

크레딧 : CSS In Depth


0
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

도움이 되길 바랍니다. 이 공식을 Phase 게임에 사용하고 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.