max-font-size를 구현하는 방법은 무엇입니까?

Question 1

를 사용하여 글꼴 크기를 지정하고 싶습니다 vw.

font-size: 3vw;

그러나 글꼴 크기를 36px로 제한하고 싶습니다. max-font-size미디어 쿼리를 사용하는 유일한 옵션 인 존재하지 않는에 해당하는을 어떻게 얻을 수 있습니까?

Question 2

font-size: 3vw;글꼴 크기가 뷰포트 너비의 3 %가됨을 의미합니다. 따라서 뷰포트 너비가 1200px 인 경우 글꼴 크기는 3 % * 1200px = 36px가됩니다.

따라서 기본 3vw 글꼴 크기 값을 재정의하기 위해 단일 미디어 쿼리를 사용하여 36px의 max-font-size를 쉽게 구현할 수 있습니다.

Codepen 데모 (브라우저 크기 조정)

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>hello</div>

스 니펫 확장

업데이트 : 새로운 CSS min () 함수 를 사용하면 미디어 쿼리 ( caniuse )를 사용하지 않고도 위 코드를 단순화 할 수 있습니다.

div {
  font-size: min(3vw, 36px);
}

위의 예에서 font-size는 최대 36px이지만 뷰포트의 너비가 1200px 미만이면 3vw로 감소합니다 (여기서 3vw는 36px 미만의 값으로 계산 됨).

즉 font-size, 위의 방식으로 뷰포트 단위를 사용 하는 것은 뷰포트 너비가 훨씬 작을 때 (예 : 320px) 렌더링 된 글꼴 크기가 0.03 x 320 = 9.6px가되어 매우 (너무) 작아지기 때문에 문제가됩니다.

이 문제를 극복하기 위해 Fluid Type AKA CSS Locks 라는 기술을 사용하는 것이 좋습니다 .

CSS 잠금은 다음과 같은 특정 종류의 CSS 값 계산입니다.

최소값과 최대 값이 있습니다.

그리고 두 개의 중단 점 (보통 뷰포트 너비를 기준으로 함),

이러한 중단 점 사이에서 실제 값은 최소값에서 최대 값까지 선형 적으로 이동합니다.

따라서 최소 글꼴 크기가 600px 이하의 뷰포트 너비에서 16px가되도록 위의 기술을 적용하고 1200px의 뷰포트 너비에서 최대 32px에 도달 할 때까지 선형 적으로 증가한다고 가정 해 보겠습니다.

이는 다음과 같이 나타낼 수 있습니다 (자세한 내용은 이 CSS 트릭 문서 참조).

div {
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  div {
    font-size: calc(16px + 16 * ((100vw - 600px) / 600));
  }
}
@media screen and (min-width: 1200px) {
  div {
    font-size: 32px;
  }
}

또는 CSS가 다음과 같이 보이도록 모든 수학을 수행 하는 이 SASS 믹스 인 을 사용할 수 있습니다 .

/* 
     1) Set a min-font-size of 16px when viewport width < 600px
     2) Set a max-font-size of 32px when viewport width > 1200px and
     3) linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px 
*/

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}

코드 스 니펫 표시

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//                                                                         
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

// Usage:
// ======

// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }

// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

////////////////////////////////////////////////////////////////////////////

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Expand snippet

Codepen 데모

업데이트 : 새로운 clamp () CSS 함수 ( caniuse )를 사용하여 위의 코드를 간단하게 리팩토링 할 수 있습니다.

div {
  font-size: clamp(16px, 3vw, 32px);
}

MDN 참조 :

clamp ()를 사용하면 뷰포트의 크기에 따라 커지는 글꼴 크기를 설정할 수 있지만 최소 글꼴 크기보다 작거나 최대 글꼴 크기를 초과하지는 않습니다. Fluid Typography의 코드와 동일한 효과가 있지만 한 줄에 미디어 쿼리를 사용하지 않습니다.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

-

추가 읽기

유체 타이포그래피

CSS에서 max-font-size를 어떻게 수행합니까?

CSS Poly Fluid Sizing을 사용한 유연한 반응 형 타이포그래피

CSS의 비선형 보간

Question 3

여기 또 다른 아이디어가 있습니다. calc 함수는 배정 밀도 부동 소수점을 사용합니다. 따라서 1e18 근처에서 계단 함수를 나타냅니다. 예를 들면

width: calc(6e18px + 100vw - 6e18px);

0px, 1024px, 2048px 등의 값으로 스냅됩니다. 펜 https://codepen.io/jdhenckel/pen/bQNgyW 참조

단계 함수는 몇 가지 영리한 수학으로 abs 값과 최소 / 최대를 생성하는 데 사용할 수 있습니다. 예를 들어

max(x, y) = x - (x + y) * step(y - x)

주어진 단계 (z)는 z <0 일 때 0이고 그렇지 않으면 1입니다.

실용적이지는 않지만 시도하는 것이 재미있을 수도 있습니다.

( 주의 : 이 기술은 사양에없는 구현 세부 정보에 따라 달라집니다. 현재 Chrome 및 Safari에서는 작동하지만 CSS 값에 배정 밀도 부동 소수점을 사용하지 않는 Firefox, Edge 또는 Internet Explorer에서는 작동하지 않습니다.)

업데이트 : CSS가 이제 min, max 및 clamp를 지원하기 때문에이 게시물은 더 이상 유용하지 않습니다 .

Question 4

또 다른 방법으로 글꼴 크기를 느리게 늘리면 최대 글꼴 크기가 제한되지 않지만 매우 넓은 화면에서도 더 좋아 보입니다. 질문에 완벽하게 답하지는 않지만 1 줄 ...

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

업데이트 : CSS가 개선되었으며 clamp(min, preferred, max)기능 사용을 권장 합니다.

font-size: clamp(12px, 2vw, 20px);

Question 5

어느 시점에서, 규모가 오른쪽을 font-size초과하는 36px것을 찾으십시오. 가정하면 다음을 초과합니다 width: 2048px.

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

예, 안타깝게도 @media쿼리 를 사용해야 합니다. 나는 그것이 아무것도 영향을 미치지 않기를 바랍니다.