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

用这个方程。

对于大于或小于1440和768的任何值，您可以给它一个静态值，或者应用相同的方法。

vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。

唯一的方法可能是为不同的屏幕大小设置不同的宽度，但这种方法是非常不准确的，你应该使用js解决方案。

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

为什么不在服务器端根据字符数设置类呢?

    .NotMuchText {
        font-size: 20px;
    }

    .LotsOfText {
        font-size: 10px;
    }

我还想要一个非javascript解决方案，CSS解决方案，并诉诸于PHP/CSS解决方案。

作为参考，一个非css解决方案:

下面是一些JS，根据容器内的文本长度来调整字体大小。

代码依赖于略有修改的代码，但相同的想法如下:

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // Reset font-size to 100% to begin
    container.style.fontSize = "100%";

    // Check if the text is wider than its container,
    // if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

对于我来说，当用户在下拉菜单中进行选择时，我会调用这个函数，然后填充菜单中的div(这是动态文本出现的地方)。

    scaleFontSize("my_container_div");

此外，我还使用CSS省略号(“…”)来截断甚至更长的文本，如下所示:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

所以,最终:

短文:“苹果” 完全渲染，漂亮的大字母。 长文本:“苹果和橘子” 通过上面的JS缩放函数缩小70%。 超长文本:“苹果、橘子和香蕉……” 通过上面的JS缩放函数和CSS规则，缩小70%并用“…”省略号截断。

您还可以尝试使用CSS字母间距来使文本更窄，同时保持相同的字体大小。

这个解决方案也可能有帮助:

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

这对我很有效!

注意:此解决方案根据视口大小而不是内容的数量而更改

我刚刚发现这是可能的使用大众单位。它们是与设置视口宽度相关的单元。它有一些缺点，比如缺乏传统浏览器的支持，但这绝对是值得认真考虑的。另外，你仍然可以为旧的浏览器提供备份，如下所示:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ 而且 https://medium.com/design-ux/66bddb327bb1