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>

CSS3媒体查询平滑度

1 个答案: