Programming

CSS의 반응 형 글꼴 크기

procodes 2020. 3. 6. 07:54
반응형

CSS의 반응 형 글꼴 크기

Zurb Foundation 3 그리드를 사용하여 사이트를 만들었습니다 . 각 페이지에는 큰 것이 있습니다 h1.

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

브라우저 크기를 모바일 크기로 조정하면 큰 글꼴이 조정되지 않고 큰 텍스트를 수용하기 위해 브라우저에 가로 스크롤이 포함됩니다.

나는에 나타났습니다 Zurb 재단 3 타이포그래피의 예제 페이지 가 압축 및 확장으로, 헤더가 브라우저에 적응.

내가 정말로 명백한 것을 놓치고 있습니까? 어떻게하면 되나요?

는 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에서 수정되었습니다.

ems, pxs 또는 pts 대신 viewport 값을 사용할 수 있습니다.

1vw = 뷰포트 너비의 1 %

1vh = 뷰포트 높이의 1 %

1vmin = 1vw 또는 1vh 중 작은 값

1vmax = 1vw 또는 1vh 중 큰 쪽

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

CSS-Tricks : 뷰포트 크기의 타이포그래피

나는이 문제를 극복하는 방법을 가지고 놀고 있었고 해결책을 찾았습니다.

Internet Explorer 9 이상 및 CSS calc (), rem 단위 및 vmin 단위를 지원하는 다른 모든 최신 브라우저 용 응용 프로그램을 작성할 수있는 경우 이를 사용하여 미디어 쿼리없이 확장 가능한 텍스트를 얻을 수 있습니다.

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

여기에 작동합니다 : http://codepen.io/csuwldcat/pen/qOqVNO

media반응 형 스타일링을 위해 CSS 지정자를 사용하십시오 ([zurb]가 사용하는 것임).

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

jQuery 솔루션을 사용하지 않으려면 TextFill 플러그인을 사용해보십시오.

jQuery TextFill은 컨테이너에 맞게 텍스트 크기를 조정하고 글꼴 크기를 최대한 크게 만듭니다.

https://github.com/jquery-textfill/jquery-textfill

이를 달성하는 몇 가지 방법이 있습니다.

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

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

치수를 % 또는 em로 사용하십시오 . 기본 글꼴 크기 만 변경하면 모든 것이 바뀝니다. 이전 글꼴과 달리 매번 h1이 아닌 body 글꼴을 변경하거나 기본 글꼴 크기를 장치의 기본값으로 설정하고 나머지는 모두 다음과 같이 할 수 있습니다 em.

  1. “Ems”(em) :“em”은 확장 가능한 단위입니다. 예를 들어, 문서의 글꼴 크기가 12pt이면 1em은 12pt와 같습니다. Em은 본질적으로 확장 가능하므로 2 em은 24pt, 0.5 em은 6pt 등입니다.
  2. 퍼센트 (%) : 퍼센트 단위는“em”단위와 매우 유사합니다. 몇 가지 근본적인 차이점이 있습니다. 우선 현재 글꼴 크기는 100 %입니다 (즉, 12pt = 100 %). 퍼센트 단위를 사용하는 동안 텍스트는 모바일 장치 및 접근성을 위해 완벽하게 확장 가능합니다.

kyleschaeffer.com / .... 참조

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

  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 ...를 참조 하고 Can I Use ... 도 참조 하십시오.

"vw"솔루션은 매우 작은 화면으로 이동할 때 문제가 있습니다. 기본 크기를 설정하고 calc ()로 거기에서 올라갈 수 있습니다.

font-size: calc(16px + 0.4vw);

rem 단위를 사용하여 반응 형 글꼴 크기에 대한 또 다른 접근 방법이 있습니다.

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

Internet Explorer 7 및 Internet Explorer 8에서이 작업을 수행하려면 px 단위로 대체를 추가해야합니다.

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

Less로 개발 중이라면 수학을 할 믹스 인을 만들 수 있습니다.

렘 단위 지원-http: //caniuse.com/#feat=rem

이것은 부분적으로 재단 5에서 구현됩니다.

_type.scss 파일에는 두 가지 헤더 변수 세트가 있습니다.

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

중간 증가의 경우 첫 번째 변수 세트를 기반으로 크기를 생성합니다.

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

그리고 기본적으로 작은 화면의 경우 두 번째 변수 세트를 사용하여 CSS를 생성합니다.

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

이러한 변수를 사용하고 사용자 정의 scss 파일에서 재정 의하여 각 화면 크기에 대한 글꼴 크기를 설정할 수 있습니다.

FlowType 이라는 JavaScript 코드를 사용하여 반응 형 글꼴 크기를 수행 할 수도 있습니다 .

FlowType-가장 뛰어난 반응 형 웹 타이포그래피 : 요소 너비에 따른 글꼴 크기.

또는 FitText 라는 JavaScript 코드 :

FitText-글꼴 크기를 유연하게 만듭니다. 반응 형 디자인에서이 플러그인을 사용하면 헤드 라인의 비율 기반 크기를 조정할 수 있습니다.

빌드 도구를 사용중인 경우 배낭을 사용해보십시오.

그렇지 않으면 CSS 변수 (사용자 정의 속성)를 사용하여 최소 및 최대 글꼴 크기를 쉽게 제어 할 수 있습니다 ( demo ).

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

jQuery의 "FitText"는 아마도 가장 반응이 좋은 헤더 솔루션 일 것입니다. GitHub에서 확인하십시오 : https://github.com/davatron5000/FitText.js

많은 프레임 워크와 마찬가지로 "그리드에서 벗어나"프레임 워크의 기본 CSS를 재정의하면 상황이 좌우로 깨지기 시작합니다. 프레임 워크는 본질적으로 엄격합니다. Zurb의 기본 H1 스타일을 기본 그리드 클래스와 함께 사용하는 경우 웹 페이지가 모바일 (예 : 반응 형)에 올바르게 표시되어야합니다.

그러나 매우 큰 6.2em 제목이 필요한 것 같습니다. 즉, 세로 모드의 모바일 디스플레이에 맞게 텍스트를 축소해야합니다. 가장 좋은 방법은 FlowType 및 FitText 와 같은 반응 형 텍스트 jQuery 플러그인을 사용하는 것 입니다. 가벼운 것을 원한다면 Scalable Text jQuery 플러그인을 확인하십시오.

http://thdoan.github.io/scalable-text/

샘플 사용법 :

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

실제 원본 Sass (scss 아님)에서 아래 믹스 인을 사용하여 단락과 모든 제목을 자동으로 설정할 수 있습니다 font-size.

훨씬 컴팩트하기 때문에 좋아합니다. 그리고 더 빨리 입력합니다. 그 외에는 동일한 기능을 제공합니다. 여전히 새로운 문법에 충실하려는 경우 어쨌든, -하는 SCS을, 여기에 SCS들에 내 말대꾸 컨텐츠를 변환 주시기 : [CONVERT SASS TO SCSS 여기]

아래에서는 네 가지 Sass 믹스 인을 제공합니다. 필요에 따라 설정을 조정해야합니다.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

설정을 마치고 나면 + config-and-run-font-generator () 한 믹스 인에서 전화를 겁니다 . 자세한 내용은 아래 코드 및 주석을 참조하십시오.

헤더 태그에 대해 수행되는 것처럼 미디어 쿼리에 대해 자동으로 수행 할 수 있지만 모든 미디어 쿼리를 사용하므로 모든 사람에게 적합하지는 않습니다. 저는 모바일 우선 디자인 방식을 사용하므로 이것이 그렇게하는 것입니다. 이 코드를 자유롭게 복사하여 사용하십시오.

이 믹스들을 파일로 복사하고 붙여 넣기 :

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

모든 믹스를 필요에 맞게 구성하십시오-IT와 함께하십시오! :) 그런 다음 실제 SASS 코드 맨 위에 다음을 호출하십시오.

+config-and-run-font-generator()

이 출력이 생성됩니다. 매개 변수를 사용자 정의하여 다른 결과 세트를 생성 할 수 있습니다. 그러나 우리는 모두 다른 미디어 쿼리를 사용하기 때문에 일부 믹스 인은 수동으로 편집해야합니다 (스타일 및 미디어).

생성 된 CSS :

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

이 CSS 클래스를 사용하고 모든 화면 크기에서 텍스트를 유동적으로 만듭니다.

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

방금 요소 당 한 번만 글꼴 크기를 정의해야한다는 아이디어를 얻었지만 여전히 미디어 쿼리의 영향을받습니다.

먼저 미디어 쿼리를 사용하는 뷰포트에 따라 변수 "--text-scale-unit"을 "1vh"또는 "1vw"로 설정했습니다.

그런 다음 calc () 및 곱셈기 번호를 사용하여 변수를 글꼴 크기로 사용합니다.

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

내 예제에서는 뷰포트의 방향 만 사용했지만 모든 미디어 쿼리에서 원칙이 가능해야합니다.

CSS-Tricks 에서 훌륭한 기사를 보았습니다 . 그것은 잘 작동합니다 :

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

예를 들면 다음과 같습니다.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

line-height브라우저 에 따라 속성을 변경하기 위해 속성에 동일한 방정식을 적용 할 수 있습니다 .

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

이를 달성 할 수있는 방법은 다음과 같습니다.

  1. 예를 들어 2.3 rem에 rem 사용
  2. 예를 들어 2.3em에 em 사용
  3. 예를 들어 2.3 %에 %를 사용하십시오. 또한 다음을 사용할 수 있습니다. vh, vw, vmax 및 vmin.

이 단위는 화면의 너비와 높이에 따라 자동으로 조정됩니다.

글꼴 크기를 vw (뷰포트 너비)로 정의하면 글꼴 크기를 반응 형으로 만들 수 있습니다. 그러나 모든 브라우저가이를 지원하지는 않습니다. 해결책은 JavaScript를 사용하여 브라우저 너비에 따라 기본 글꼴 크기를 변경하고 모든 글꼴 크기를 %로 설정하는 것입니다.

반응 형 글꼴 크기를 만드는 방법을 설명하는 기사는 다음과 같습니다. http://wpsalt.com/responsive-font-size-in-wordpress-theme/

이 솔루션을 찾았으며 매우 효과적입니다.

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

데스크톱 및 모바일 / 태블릿 모두에서 텍스트가 잘 보이도록 텍스트 문제를 해결하는 한 가지 방법은 텍스트 크기를 물리적 센티미터 또는 인치와 같은 물리적 단위 (화면 PPI (인치당 포인트)에 의존하지 않음)로 고정하는 것입니다.

이 답변을 기반으로 아래에는 반응 형 글꼴 크기로 HTML 문서 끝에서 사용하는 코드가 있습니다.

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

위의 코드에서 브라우저 / OS가 화면의 PPI에 맞게 올바르게 구성되어 있으면 다른 클래스의 항목에 물리적 크기로 글꼴 크기가 할당됩니다.

실제 단위 글꼴은 화면과의 거리가 일반적인 경우 (책 읽기 거리)이면 항상 너무 크거나 작지 않습니다.

텍스트 크기는 vw"뷰포트 너비"를 의미 하는 단위 로 설정할 수 있습니다 . 이렇게하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

개인 프로젝트에는 vw와 @meida를 사용했습니다. 완벽하게 작동합니다.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

글꼴 크기 조정과 관련하여 쉬운 해결책이없는 것이 두렵습니다. 미디어 쿼리를 사용하여 글꼴 크기를 변경할 수 있지만 기술적으로는 부드럽게 크기가 조정되지 않습니다. 예를 들어, 다음을 사용하는 경우 :

@media only screen and (max-width: 320px){font-size: 3em;}

당신 font-size은 300 픽셀과 200 픽셀 너비 모두에 대해 3em입니다. 그러나 font-size완벽하게 반응하려면 200px 너비를 더 줄여야 합니다.

그렇다면 실제 해결책은 무엇입니까? 한 가지 방법이 있습니다. 텍스트가 포함 된 PNG 이미지 (투명한 배경 포함)를 만들어야합니다. 그런 다음 이미지를 쉽게 반응 형으로 만들 수 있습니다 (예 : 너비 : 35 %; 높이 : 28px). 이러한 방식으로 텍스트가 모든 장치에서 완벽하게 반응합니다.

많은 결론을 얻은 후에 나는이 조합으로 끝났습니다.

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

    h2 {
        font-size: 4.3vw;
    }
}

이 방정식을 사용하십시오.

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

1440 및 768보다 크거나 작은 경우 정적 값을 지정하거나 동일한 방법을 적용 할 수 있습니다.

vw 솔루션의 단점은 스케일 비율을 설정할 수 없다는 것입니다. 화면 해상도 1440에서 5vw는 아이디어 글꼴 크기 인 60px 글꼴 크기가 될 수 있지만 창 너비를 768로 줄이면 결국 종료 될 수 있습니다 원하는 최소값이 아닌 12px입니다.

이 방법을 사용하면 상한과 하한을 설정할 수 있으며 글꼴은 그 사이에서 확장됩니다.

여기 나를 위해 일한 것이 있습니다. 나는 iPhone에서만 테스트했습니다.

당신이 가진 여부 h1, h2또는 p태그는 텍스트 주위에이를 넣어 :

<h1><font size="5">The Text you want to make responsive</font></h1>

이것은 22pt 텍스트를 데스크탑에 렌더링하며 여전히 iPhone에서 읽을 수 있습니다.

<font size="5"></font>

참고 URL : https://stackoverflow.com/questions/15649244/responsive-font-size-in-css

반응형

'Programming' 카테고리의 다른 글

비공개 메소드를 테스트해야합니까, 아니면 공개 메소드 만 테스트해야합니까?  (0) 2020.03.06
포트 80은 SYSTEM (PID 4)에서 사용 중입니까?  (0) 2020.03.06
sqlite3 / iPhone에서 열 이름 목록을 얻는 방법은 무엇입니까?  (0) 2020.03.06
-lPods에 대한 라이브러리를 찾을 수 없습니다  (0) 2020.03.06
Windows의 자산 index.android.bundle에서 스크립트를로드 할 수 없습니다  (0) 2020.03.06

'Programming'의 다른글

  • 현재글CSS의 반응 형 글꼴 크기

관련글

댓글

티스토리툴바