CSS中的响应式字体大小

我已经使用Zurb基金会网格创建了一个站点。每页都有一个大的h1:

body {
font-size: 100%
}


/* Headers */


h1 {
font-size: 6.2em;
font-weight: 500;
}
<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->

当我将浏览器调整为移动尺寸时，大字体不会调整，并导致浏览器包含水平滚动以适应大文本。

我注意到，在Zurb基金会 Typography 示例页面中，头文件在压缩和扩展时适应浏览器。

我是不是忽略了一些很明显的东西?我该如何做到这一点?

1264267 次浏览
小开
最佳答案

在调整浏览器窗口大小时，font-size不会像这样响应。相反，它们响应浏览器的缩放/类型大小设置，例如，如果你在浏览器中同时按下键盘上的Ctrl和+。

媒体查询

你必须考虑使用媒体查询来减少字体大小在特定的时间间隔，它开始破坏你的设计和创建滚动条。

例如，试着在你的CSS底部添加这个，在你的设计开始中断的地方改变320像素的宽度:

@media only screen and (max-width: 320px) {


body {
font-size: 2em;
}


}

视口百分比长度

你也可以使用视口百分比长度，如vw， vh， vmin和vmax。官方W3C文档声明:

viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

同样，从同一W3C文档中，每个单独的单元可以定义如下:

vw单位-等于初始包含块宽度的1%。

vh单位-等于初始包含块高度的1%。

vmin单位-等于vw或vh中较小者。

vmax单位-等于vw或vh中较大的一个。

它们的使用方式与其他CSS值完全相同:

.text {
font-size: 3vw;
}


.other-text {
font-size: 5vh;
}

兼容性相对较好，可以看到在这里。但是，某些版本的ie浏览器和Edge浏览器不支持vmax。此外，iOS 6和7的vh单位也有问题，这在iOS 8中得到了修复。

小开

使用CSS media说明符(这是他们[zurb]使用的)来进行响应式样式:

@media only screen and (max-width: 767px) {


h1 {
font-size: 3em;
}


h2 {
font-size: 2em;
}


}
小开

如果你不介意使用jQuery解决方案，你可以尝试TextFill插件

jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。

https://github.com/jquery-textfill/jquery-textfill

小开

你可以使用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: Viewport size Typography

小开
jQuery的“FitText”可能是最好的响应头的解决方案。在GitHub上查看: https://github.com/davatron5000/FitText.js < / p >
小开

响应式字体大小还有另一种方法——使用rem单位。

html {
/* Base font size */
font-size: 16px;
}


h1 {
font-size: 1.5rem;
}


h2 {
font-size: 1.2rem;
}

在稍后的媒体查询中，您可以通过更改基本字体大小来调整所有字体的大小:

@media screen and (max-width: 767px) {
html {
/* Reducing base font size will reduce all rem sizes */
font-size: 13px;
}


/* You can reduce font sizes manually as well */
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.0rem;
}
}

为了在Internet  explorer7和Internet  explorer8中实现此功能，您必须添加一个以px为单位的回退:

h1 {
font-size: 18px;
font-size: 1.125rem;
}

如果你正在使用少进行开发，你可以创建一个mixin来帮你计算。

Rem单元支持- http://caniuse.com/#feat=rem

小开

有几种方法可以实现这一点。

使用媒体查询，但它要求几个断点的字体大小:

body
{
font-size: 22px;
}


h1
{
font-size: 44px;
}


@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}

在%或em中使用维度。只要改变基本字体大小，一切都会改变。与前一个不同的是，你可以只更改主体字体而不是每次都更改h1，或者让基本字体大小为设备的默认值，其余都在em中:

  1. “Ems”(em):“em”是一个可伸缩的单位。em等于当前的字体大小，例如，如果文档的字体大小为12 pt，则1 em等于12 pt。em本质上是可扩展的，因此2 em将等于24 pt， .5 em将等于6 pt，等等。
  2. 百分比(%):百分比单位很像“em”单位，除了一些基本的区别。首先，当前的字体大小等于100%(即12 pt = 100%)。当使用百分比单位时，您的文本仍然可以完全扩展到移动设备和可访问性。

看到kyleschaeffer.com/..。

CSS  3支持相对于视图端口的新维度。但这在Android上行不通:

  1. 3.2vw =视口宽度的3.2%
  2. 3.2vh =视口高度的3.2%
  3. 3.2vmin =小于3.2vw或3.2vh

  4. 3.2vmax = 3.2vw或3.2vh更大

    body
{
font-size: 3.2vw;
}

See CSS-Tricks ... and also look at Can I Use...

小开

与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类，那么网页应该在移动设备上正常显示(即响应式)。

然而，看起来你想要非常大的6.2em标题，这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件，如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以看看我的可伸缩文本jQuery插件:

< a href = " http://thdoan.github。io / scalable-text " rel = " http://thdoan.github.io/scalable-text/ nofollow”> < / >

示例用法:

<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
小开

这部分在foundation 5中实现。

在文件_type中。SCSS有两组头变量:

// We use these to control header font sizes
// for medium screens and above


$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;




// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

对于medium up，它们根据第一组变量生成大小:

@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}

对于default-i。在小屏幕上，他们使用第二组变量来生成CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

您可以使用这些变量并在自定义scss文件中重写，为各自的屏幕大小设置字体大小。

小开

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

无论你有h1， h2，还是p标签，在你的文本周围写上:

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

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

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

关于字体大小的调整，恐怕没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会平滑地调整大小。举个例子，如果你使用:

@media only screen and (max-width: 320px){font-size: 3em;}

对于300像素和200像素宽度，你的font-size将是3em。但是你需要降低200px宽度的font-size来实现完美的响应。

那么，真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后，你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式，您的文本将与所有设备完全响应。

小开

如果在vw(视口宽度)中定义字体大小，则可以使字体大小具有响应性。然而，并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小，并以%为单位设置所有字体大小。

下面是一篇描述如何创建响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/

小开

我一直在想办法克服这个问题，我相信我已经找到了一个解决方案:

如果你可以为internetexplorer9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本，而不需要媒体查询:

body {
font-size: calc(0.75em + 1vmin);
}

下面是它的动作:http://codepen.io/csuwldcat/pen/qOqVNO

小开

响应式字体大小也可以用这个名为FlowType的JavaScript代码来实现:

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

或者这个JavaScript代码叫做FitText:

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

小开

在实际的原始萨斯(不是scss)中，你可以使用下面的mixins来自动设置段落和所有标题的font-size。

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

下面我给你四个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;


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

在得出许多结论后，我最终得出了以下结论:

@media only screen and (max-width: 730px) {


h2 {
font-size: 4.3vw;
}
}
小开

如果你正在使用一个构建工具，那么试试Rucksack。

否则，你可以使用CSS变量(自定义属性)来轻松控制最小和最大字体大小，如下所示(演示):

* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}


h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}


h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
小开

“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:

font-size: calc(16px + 0.4vw);
小开

你可以通过以下方法来实现这一点:

  1. 用rem表示例如2.3 rem
  2. 用em表示例如2.3em
  3. 使用%例如2.3% 此外，你可以使用: Vh, vw, vmax和vmin.

这些单元将根据屏幕的宽度和高度自动调整大小。

小开

我使用这些CSS类，它们使我的文本在任何屏幕大小上都是流动的:

.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}


.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}


.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}


.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
小开

我找到了这个解决方案，对我来说非常有效:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/


body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
小开

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

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

小开

文本大小可以用vw单位设置，这意味着“视口宽度”。这样，文本大小将跟随浏览器窗口的大小:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

在我的个人项目中，我使用vw和@meida。它工作得很完美。

.mText {
font-size: 6vw;
}


@media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}




.sText {
font-size: 4vw;
}


@media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}
小开

我刚刚提出了一个想法，每个元素只需定义一次字体大小，但它仍然受到媒体查询的影响。

首先，我设置变量“——text-scale-unit”为“1vh”或“1vw”，这取决于使用媒体查询的视口。

然后我使用calc()变量和我的字体大小乘数:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
:root{
--text-scale-unit: 1vh;
}
}
@media (orientation: portrait) {
:root {
--text-scale-unit: 1vw;
}
}




/* Use a variable with calc and multiplication. */
.large {
font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
font-size: calc(var(--text-scale-unit) * 10);
}
.small {
font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
Responsive
</span>
<span class="large">
text
</span>
<span class="small">
with one
</span>
<span class="extra-small">
font-size tag.
</span>

在我的例子中，我只使用了视口的方向，但是这个原则应该适用于任何媒体查询。

小开

用这个等式:

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

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

vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。

使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。

小开

我从css技巧看到了一篇很棒的文章。它工作得很好:

body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

例如:

body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

我们可以将相同的公式应用于line-height属性，使其也随浏览器而改变。

body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
小开

我们可以使用css中的calc()

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))

< a href = " https://codepen。io/nicojl20/pen/OJVGazX" rel="nofollow noreferrer"> code depen . io/nicojl20/pen/OJVGazX" rel="nofollow noreferrer

小开

试着在你的样式表中包含以下内容:

html {
font-size: min(max(16px, 4vw), 22px);
}

更多信息在https://css-tricks.com/simplified-fluid-typography/

小开 
h1{
font-size : clamp(2rem, 10vw, 5rem);
}

这里clamp有3个参数。

  • 第一个是允许的最小字体大小。

  • 第三个是允许的最大字体大小。

  • 第二个参数是您希望始终拥有的字体大小。它的单位必须是相对的(vw, vh, ch)，而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。

< p > 考虑一个例子: 假设有一个很大的fontawesome图标，您想动态调整大小(响应式图标)

fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
  • 这里80vw是首选的字体大小。
  • 15雷姆是最小字体大小(下界)。
  • 80vh是最大字体大小(上限)。

即。

  • 如果在特定的手机屏幕尺寸，如果80vw <15rem那么字体大小是15rem。

  • 如果屏幕太宽，那么如果80vw >那么font-size就是80vh。

人们提出的上述方法往往效果不确定。就像我们只使用vw时，字体大小有时可能太大或太小(无界)。

media查询可以使用，但你必须绑定字体大小至少3个媒体查询

小开

字体大小的变化取决于屏幕大小使用CSS，你可以看到这个H1标签是有响应的。(如果我说错了请指正)

@media only screen and (max-width: 1000px) {
h1 {
font-size:5em;
}
}
@media only screen and (max-width: 500px) {
h1 {
font-size: 3em;
}
}
@media only screen and (max-width: 300px) {
h1 {
font-size: 2em;
}
}
@media only screen and (max-width: 100px) {
h1 {
font-size: 1em;
}
}

<h1>Resize the browser!</h1>

小开

有很多答案，但我没有看到任何人提到与媒体查询相结合的最小或最大函数

在CSS中有一个max()函数，所以我们上面的例子变成了一行代码:

font-size: max(30vw, 30px);

或者用最小值和最大值加倍:

font-size: min(max(16px, 4vw), 22px);

这与:

font-size: clamp(16px, 4vw, 22px);

然后不要忘记将其包装在媒体查询中，并应用于您喜欢的h1,h2,h3,h4,h5,h6。

    @media (max-width: 600px) {
h1 {
font-size: clamp(16px, 4vw, 22px);
}
}
小开

设置你的基本字体大小和夹钳功能。

使用clamp()来设置字体大小，就像在这些例子中一样，允许您设置一个随视口大小而增长的字体大小，但不会低于最小字体大小

Clamp Method MDN Docs

这里有一个例子。

h1 {
font-size: clamp(1.5em, 4vw, 2.5em);
}


h2 {
font-size: clamp(1.2em, 4vw, 2.4em);
}


p {
font-size: clamp(0.6em, 4vw, 1.2em);
}

提交答案