Question

我想在宽度1300px和1880px之间动态更改字体大小。

但是，我所拥有的空间只会改变1维。

1300px:

|--|------------------------|--|
   | container: 1170px      |

1880px:

|------|------------------------|------|
       | container: 1170px      |

HTML：

<div class="outer">
  <div class="inner">
    <h2>
    </h2>
  </div>
</div>

正如您所看到的，容器的宽度没有变化，但是元素的高度确实如此，因为我使用了：

.inner
  height: calc(0.2 * 100vw)

尝试使用：

font-size: 2.5vw

但是我的字体以这种方式在两个维度上增长，所以最终在更大的屏幕尺寸内适合内部div的内容不是。

现在我正在使用：

<style>
    .outer {
        width: 100%;
        background: red;
    }
    .inner{
        width: 100%;
        max-width: 1170px;
        margin: 0 auto;
        height: calc(.2 * 100vw);
        background: white;
    }
    h2{
        font-size: 34px;
        line-height: 42px;
        max-width: 66%;
    }
    @media (min-width: 1300px) and (max-width: 1879px){
        h2{
            font-size: 2.5vw;
            /*shameful fix: at 1300px the 34px font is ok, also at 1880px the 44px is ok*/
            font-size: calc(34px + ((100vw - 1300px)/58));
            line-height: calc(42px + ((100vw - 1300px)/58));
        }
    }
    </style>
<div class="outer">
    <div class="inner">
        <h2>
            Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum
            Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum
            Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum Lots of lorem ipsum
        </h2>
    </div>
</div>

使用这个自定义计算它可以工作，但2.5vw它不会。还抬头看，你不能在css计算中使用平方根。

编辑：我发现了一些更有趣的内容，这些字体会改变css-tricks上的尺寸。

使用css3计算的异国字体大小计算

0 个答案: