解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这与屏幕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正确配置。

物理单位字体总是不太大也不太小，只要到屏幕的距离是正常的(阅读书籍的距离)。

响应式字体大小也可以用这个称为FlowType的JavaScript代码完成:

http://simplefocus.com/flowtype/ https://github.com/simplefocus/FlowType.JS

FlowType -响应式网页排版在其最好的:字体大小基于元素宽度。

或者这个叫做FitText的JavaScript代码:

http://fittextjs.com/ https://github.com/davatron5000/FitText.js

FitText -使字体大小灵活。在响应式设计中使用这个插件，根据比例调整标题的大小。

这是对我有用的方法。我只在iPhone上进行了测试。

无论你有h1, h2或p标签，把它放在你的文本周围:

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

这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。

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

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

你可以使用viewport值代替ems, pxs或pts:

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:视口大小的排版

在实际的原始Sass(不是scss)中，你可以使用下面的mixins来自动设置段落和所有标题的字体大小。

我喜欢它，因为它更紧凑。打字也更快。除此之外，它提供了相同的功能。无论如何，如果你仍然想坚持新的语法- scss，那么请随意将我的Sass内容转换为scss: [将sass转换为SCSS]

下面我给你四个Sass mixins。您必须根据需要调整它们的设置。

=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

在你完成设置后，只需对一个mixin进行调用，即:+config-and-run-font-generator()。有关更多信息，请参阅下面的代码和注释。

我猜你可以像处理标题标签一样自动地为媒体查询做这件事，但我们都使用不同的媒体查询，所以它不适合每个人。我使用移动优先的设计方法，所以这就是我如何做到这一点。请随意复制并使用此代码。

复制并粘贴这些mixins到你的文件中:

=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

根据您的需要配置所有的mixin -玩它!:)然后在你实际的sass代码的顶部调用它:

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

这会产生这样的输出。您可以自定义参数以生成不同的结果集。但是，因为我们都使用不同的媒体查询，有些mixin必须手动编辑(样式和媒体)。

生成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;

}