首页 文章

如何在CSS3中创建相对于屏幕宽度的真正响应式排版

提问于
浏览 次
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的情况下这样做（嘘！没有字体.js！） . 那里有CSS3大师吗？

请在明信片上的答案 .

css3 font-size typography

4 回答

  • 2

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

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

    值得注意的是，IE 8，Opera Mini和iOS Safari 3.2并没有在简写"font"属性中支持它 . 所以这取决于您的浏览器支持需求 . 使用px值作为回退会破坏相对单位的目的，所以......除非你指定px单位作为回退，然后你应该使用modernizr来检查vw / vh / vmax / vmin支持 .

    替代方法：

    我是'd also look into the Zurb Foundation 5'的前端框架，因为他们使用了一个相当有趣的方法，使用元标记来响应地调整字体大小 . http://foundation.zurb.com/docs/components/global.html

    有像flowtype.js这样的js库以及其他几个库，只需环顾四周（自2013年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. */
    回复于
  • 3

    只要浏览器支持，您就可以使用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（最小宽度：450px媒体查询）时，将应用动画

    当屏幕超过450px（最大宽度：450px媒体查询）时，将应用动画

    Fiddle Demo

    Animation Doc

    Keyframes Doc

    回复于
  • 1

    我所知道的两种解决方案：

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

    • 使用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解决方案可以平滑地缩放文本 .

    回复于
  • 2

    您可以使用视口单元 .

    h1{font-size: 5.4vw}

    这会给你一个字体大小，相当于我认为的视口宽度的5.4％ . 我刚刚了解到这一点，因为我在看自己 .

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

    • 1vw =视口宽度的1％

    • 1vh =视口高度的1％

    • 1vmin = 1vw或1vh，以较小者为准

    • 1vmax = 1vw或1vh，以较大者为准

    （来自上面的链接）

    回复于

相关问题