Я хочу вказати мій розмір шрифту, використовуючи vw, як у

font-size: 3vw;

Однак я також хочу обмежити розмір шрифту до 36 пікселів. Як я можу досягти еквівалента max-font-size, якого не існує - чи є єдиним варіантом використання медіа-запитів?

font-size: 3vw;означає, що розмір шрифту становитиме 3% від ширини області перегляду. Отже, коли ширина області перегляду становить 1200 пікселів - розмір шрифту становитиме 3% * 1200 пікселів = 36 пікселів.

Отже, максимальний розмір шрифту 36 пікселів може бути легко реалізований за допомогою одного медіа-запиту, щоб замінити значення розміру шрифту 3vw за замовчуванням.

Демонстрація 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);
}

У наведеному вище прикладі розмір шрифту становитиме максимум 36 пікселів, але зменшиться до 3 вольт, якщо область перегляду шириною менше 1200 пікселів (де 3 вВ обчислюється на значення менше 36 пікселів)

При цьому, використовуючи одиниці вікна перегляду для font-size вищезазначеним способом є проблематичним, оскільки коли ширина вікна перегляду значно менша - скажімо, 320 пікселів - тоді розмір шрифту, що відображається, стане 0,03 х 320 = 9,6 пікселів, що дуже (занадто) мало.

Для того, щоб подолати цю проблему, я можу рекомендувати використовувати техніку, яка називається Fluid Type AKA CSS Locks .

Блокування CSS - це конкретний вид обчислення значення CSS, де:

• є мінімальне і максимальне значення,
• і дві точки зупинки (зазвичай на основі ширини області перегляду),
• а між цими точками зупинку фактичне значення лінійно переходить від мінімального до максимального.

Отже, припустимо, ми хочемо застосувати вищезазначену техніку таким чином, щоб мінімальний розмір шрифту становив 16 пікселів при ширині області перегляду 600 пікселів або менше, і буде лінійно збільшуватися, поки не досягне максимуму 32 пікселів при ширині вікна перегляду 1200 пікселів.

Це можна представити наступним чином (докладніше див. Цю статтю про 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;
  }
}

Як варіант, ми могли б використовувати цей мікс SASS, який робить всю математику для нас, щоб CSS виглядав приблизно так:

/* 
     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>

Демонстрація Codepen

Оновлення: Ми можемо використовувати нову функцію CSS clamp () ( caniuse ) для рефакторингу вищевказаного коду, щоб просто:

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

див. MDN :

clamp () дозволяє встановити розмір шрифту, який зростає зі збільшенням розміру області перегляду, але не нижче мінімального розміру шрифту або вище максимального розміру шрифту. Він має такий самий ефект, як код у рідинній типографіці, але в один рядок і без використання медіа-запитів.

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?

Рідка адаптивна типографія з полідинамічним розміром CSS

Нелінійна інтерполяція в CSS

Ось ще одна ідея. Функція calc використовує подвійну точність поплавка. Тому він виявляє ступінчасту функцію поблизу 1e18. Наприклад,

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

Це прив’яже до значень 0px, 1024px, 2048px тощо. Див. Ручку https://codepen.io/jdhenckel/pen/bQNgyW

Покрокову функцію можна використовувати для створення значення абс та min / max за допомогою розумних математичних методів. Наприклад

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

Даний крок (z) дорівнює нулю, коли z <0, а інший - інакше.

просто ідея, не дуже практична, але, можливо, цікаво спробувати.

( Увага: цей метод залежить від деталей реалізації, яких немає в будь-якій специфікації; на даний момент він працює в Chrome і Safari, але не в Firefox, Edge або Internet Explorer, які не використовують подвійну точність плаваючих значень для значень CSS.)

ОНОВЛЕННЯ: ця публікація більше не корисна (чи була вона коли-небудь), оскільки CSS тепер підтримує min, max та clamp .

Інший спосіб повільно збільшує розмір шрифту, це не обмежує максимальний розмір шрифту, але навіть на дуже широких екранах він буде виглядати краще. Не відповідає на питання ідеально, але його 1 рядок ...

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

Оновлення: покращений CSS, і я рекомендую використовувати clamp(min, preferred, max)функцію:

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

У якийсь момент font-sizeперевищення 36pxмасштабу право, знайдіть це. Якщо припустити, це перевищує, коли width: 2048px:

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

Так, на жаль, вам потрібно використовувати @mediaзапити. Сподіваюся, це ні на що не впливає.