4

假设你有一个容器 div：

.container {
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
}

这创建了一个可爱的、完全响应的左右边距，与任何浏览器屏幕宽度成比例，对吧？

对于超小和超大屏幕，您甚至可以添加几个 @media 查询来绑定它，因此内容始终是可读的：

@media (min-width: 450px) {
  .container {
  max-width: 100% // Remove the padding
  }
}

@ media (min-width: 1170px) {
  .container { max-width: 1170px // Prevent your content scaling to infinity
  }
}

现在想象一下，您希望将相同的原则应用于排版和字体大小。

具有最小值和最大值的相对 % 字体大小，与屏幕宽度成比例。我不是在谈论大量跳跃的静态@media 查询（例如，ahem BS3 依赖），而是平滑过渡，就像上面的容器一样。

而且我想在没有 javascript 的情况下做到这一点（嘘！没有 lettering.js！）。那里有任何 CSS3 大师吗？

请在明信片上回答。

4

4 回答 4

3

使用相对单位（vw/vh/vmax/vmin）出现了更新的方法，一篇很好的文章是：http ://snook.ca/archives/html_and_css/vm-vh-units

但是，这仍然没有得到广泛支持。我发现的最佳方法是将每个分辨率的字体调整应用于 html 选择器（下面的示例）。您只需在移动视图中声明基本字体大小，并使用“rem”值（相对于根选择器）逐步增强。

请注意，lte IE 8、Opera Mini 和 iOS Safari 3.2 不支持 rem 值，IE 9/10 不支持简写“font”属性。所以这取决于您的浏览器支持需求。使用 px 值作为后备会破坏相对单位的目的，所以......除非您使用modernizr.no-cssremvalue将px 单位指定为后备，然后您应该使用modernizr 来检查vw/vh/vmax/vmin 支持。

替代方法：

我还研究了 Zurb Foundation 5 的前端框架，因为他们使用了一种相当有趣的方法，使用元标记来响应地调整字体大小。http://foundation.zurb.com/docs/components/global.html

有 js 库，比如 flowtype.js 和其他一些库，看看周围（自 13 年 8 月以来有很多新东西）

:root { font-size:68.75% }

  body{ font-size:1rem; /*IE9 & 10*/
        line-height:1.625; /*IE9 & 10*/
        font:1rem/1.625 sans-serif }

    h1{ font-size:2.9375rem }
    h2{ font-size:1.8125rem }
    h3{ font-size:1.4375rem }

@media (min-width:30rem){     :root{ font-size:81.25% } }
@media (min-width:37.5em){    :root{ font-size:93.75% } }
@media (min-width:50em){      :root{ font-size:112.5% } }
@media (min-width:62.4375em){ :root{ font-size:118.75% } }

/* etc. */
于 2014-01-29T15:07:29.590 回答
2

可以使用css动画，只要浏览器支持

HTML

<div class="ProportionateFont">Text To Animate</div>

CSS

@media (max-width: 450px) {
    .ProportionateFont {
        animation: SmallerFont 0.3s;
        animation-fill-mode: forwards;
        -webkit-animation: SmallerFont 0.3s;
        -webkit-animation-fill-mode: forwards;
    }
}

@media (min-width: 450px) {
    .ProportionateFont {
        animation: LargerFont 0.3s;
        animation-fill-mode: forwards;
        -webkit-animation: LargerFont 0.3s;
        -webkit-animation-fill-mode: forwards;
    }
}

@keyframes SmallerFont {
    0% { font-size:24px; }
    100% { font-size:12px; }
}

@-webkit-keyframes SmallerFont {
    0% { font-size:24px; }
    100% { font-size:12px; }
}

@keyframes LargerFont {
    0% { font-size:12px; }
    100% { font-size:24px; }
}

@-webkit-keyframes LargerFont {
    0% { font-size:12px; }
    100% { font-size:24px; }
}

当屏幕小于 450px（min-width:450px 媒体查询）时，将应用动画

当屏幕大于 450px（max-width:450px 媒体查询）时，将应用动画

小提琴演示

动画文档

关键帧文档

于 2013-08-21T10:25:47.217 回答
2

我知道的两种解决方案：

  1. 为数百种屏幕宽度创建数百个媒体查询，并为每个查询应用适当的字体大小。当它实际上只是像平常一样使用媒体查询时，它看起来好像副本正在平滑地改变大小。只是有很多。

  2. 使用 SVG 文本。平滑扩展并且对 SEO 友好。这是我发现的一个快速示例，它显示了平滑缩放的 SVG 文本（除其他外）

http://jsfiddle.net/9tUAd/33/

<div class="svg-wrap">
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet" height="100%" width="100%">
    <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">Simplified example</text>
</svg>

除了媒体查询之外，没有纯 CSS 解决方案可以平滑缩放文本。

于 2014-03-20T19:36:21.067 回答
1

您可以使用视口单位。

h1{font-size: 5.4vw}

我相信这会给你一个等于视口宽度的 5.4% 的字体大小。我刚刚了解到这一点，因为我正在寻找自己。

这是链接：http ://css-tricks.com/viewport-sized-typography/

  • 1vw = 视口宽度的 1%
  • 1vh = 视口高度的 1%
  • 1vmin = 1vw 或 1vh，以较小者为准
  • 1vmax = 1vw 或 1vh，以较大者为准

（来自上面的链接）

于 2014-12-19T11:52:54.153 回答