CSS3 媒体查询平滑度

Question

我这里有个小问题；这是我的代码:

.big-header {
     font-size: 120px;
     font-weight: bolder;
     color: #fff;
     text-align: left;
     padding-left: 139px;
}

@media (max-width: 480px) {
     .big-header {
         font-size: 40px;
     }  
}

一切都按照我想要的方式工作，但存在一个真正的平滑问题，我的意思是有没有办法让字体大小随着宽度的减小而平滑地调整大小？当我调整窗口大小时，它直接从 120px 变为 40px。有没有办法慢慢减小字体大小？非常感谢!

Answer 1

为类型和类型收缩时添加 css 过渡:transition: all 2s;

样本:http://jsfiddle.net/chfhd5L0/3/

.big-header {
     font-size: 120px;
     font-weight: bolder;
     text-align: left;
     padding-left: 139px;
    transition: all 2s;
}

@media (max-width: 480px) {
     .big-header {
         font-size: 40px;
    transition: all 2s;
     }  
}

<p class="big-header">Hello</p>