javascript - 根据屏幕大小调整文本大小

Question

我的 html 中有不同的元素，具有不同的文本大小。我想将它们设置为动态的，以便它会针对不同的屏幕尺寸显示不同的字体大小。

最好的方法是什么？现在我是这样做的，但它使代码看起来很难看:

<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');

对于两个元素来说没问题，但我有更多。没有丰富的 html/css/javascript 经验，所以这就是我想出的。

因为我正在学习，所以我想知道什么是最好的方法。

也许您有一些改进的建议？

Answer 1

您可以为此使用新的 css 单位 vw、vh(视口(viewport)宽度/高度)。

这是一个有趣的 css-tricks article它向您展示了如何将它们用于排版。

示例:(来自上面的文章)

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

因此 h1 的字体大小为视口(viewport)宽度的 5.9%。等等

---

话虽这么说，以上述方式为 font-size 使用视口(viewport)单位是有问题的，因为当视口(viewport)宽度非常窄时 - 渲染的字体大小将变得太小，反之亦然。

为了克服这个问题，我可以推荐使用一种叫做 Fluid Type 的技术。又名 CSS Locks .

A CSS lock is a specific kind of CSS value calculation where:

• there is a minimum value and a maximum value,
• and two breakpoints (usually based on the viewport width),
• and between those breakpoints, the actual value goes linearly from the minimum to the maximum.

(From this article on CSS locks 也非常详细地解释了所涉及的数学。)

假设我们要应用上述技术，使得最小字体大小在 600 像素或更小的视口(viewport)宽度下为 16 像素，并且会线性增加，直到在 1200 像素的视口(viewport)宽度下达到最大值 32 像素。

我们可以使用 this SASS mixin它为我们做了所有的数学运算，所以 CSS 看起来像这样:

div {
  /* linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px  */
  @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;
  }
}

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

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-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 Demo

---

延伸阅读

Precise control over responsive typography

Fluid Responsive Typography With CSS Poly Fluid Sizing

Non-linear interpolation in CSS