减小小屏幕上的字体大小，这样单词就不会中断答案

【问题标题】：Reduce the font-size on small screens so words do not break减小小屏幕上的字体大小，这样单词就不会中断
【发布时间】：2018-03-19 19:02:19
【问题描述】：

我的页面标题很短，但单词中长，我希望句子中最长的单词适合屏幕的宽度。

960 像素

|                              |
|The Metropolitan Museum of Art|
|                              |

在移动设备上（屏幕低于大约 400 像素）我想自然地环绕文本，并减小大小，以便该标题中最长的单词决定字体大小。

460 像素

|                |
|The Metropolitan|
|Museum of Art   |

或更小

320 像素

|The    |
|The Metropolitan| <----- "Metropolitan" bleeds out of the page
|Museum |
|of Art |

有没有可以根据“Metropolitan”字缩小字体大小的规则？

我不想打断字：这只是糟糕的排版。

我知道我需要媒体查询，这不是问题。问题是，如果我有一个像“supercalifragilistic”这样的词，即使我将媒体查询设置为 320px 和 font-size:12px，它也会留下空格或溢出。

【问题讨论】：

我的第一个想法是您可以通过 JavaScript 应用 Scale 来实现这一点。 developer.mozilla.org/en-US/docs/Web/CSS/transform-function/…
您可以使用媒体查询将字体大小减小到320px以下
将每个单独的单词包装在一个跨度中，并使每个跨度不中断且宽度为 100%？（不是在我的电脑上测试，只是吐口水）
您是否尝试过使用 word-wrap: break-word;
媒体查询是答案，所以我不明白你怎么能说它不是。

标签： html css

【解决方案1】：

尝试像这样调整字体大小

html {
    font-size: 100%;
}

@media only screen and (max-width: 460px)
html {
    font-size: 90%;
}

@media only screen and (max-width: 320px)
html {
    font-size: 80%;
}

【讨论】：

【解决方案2】：

您可以尝试使用流体排版

CSS：

/*
Font-size is fluid.
It will be 16px when it reaches 300px width of the viewport
and 30px when it reaches 1500px of the viewport. Beyond and below those 
breakpoints 
font-size will be also fluid but we can restrict this using @media queries.
For example we can restrict that after viewport has reached the width of 1500px
the font size will be set as the fixed point (e.g. 2em).
*/
HTML {
  font-family: Montserrat, sans-serif;
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1500 - 300) );
}

/*
Notes:

-*- The rem unit:

* In IE9 and IE10, using rem with the shorthand `font` property will make the whole declaration invalid.
Also, these two browsers don’t support rem units on pseudo elements.

-*- Viewport units (vw, vh, vmin, vmax):

* IE11 and Edge don’t support the vmax unit.

-*- Calc:

* calc with px and viewport units might not work in Safari, so
we can replace px units with percentages, in order to use it with viewport 
units.

* calc with percentages is totally broken on IE (both 11 and Edge) 
so you can use a regular calc() function with the em unit,
followed by a -webkit-calc() function with the percentage unit

*/


@media screen and (min-width: 1500px) {

    HTML { 
     font-size: 1.875em; /*~30px*/ 
   }

}

Example 我找到了。

【讨论】：

【解决方案3】：

如果您希望文本大小与设备大小相关，请使用相对测量单位，例如 vw

例如：

heading {
   font-size: 10vw;
}

【讨论】：