UI视觉需求：在1200px-750px之间实现字体从16px到12px，div的宽度300px到280px，高度从200px到180px的平稳过渡
demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
margin: 0 auto;
width: 300px;
height: 200px;
font-size: 16px;
background-color: red;
text-align: center;
line-height: 200px;
}
@media screen and (max-width:1200px){
.box{
width: calc(300px - (300 - 280) / (1200 - 750) * (1200px - 100vw));
height: calc(200px - (200 - 180) / (1200 - 750) * (1200px - 100vw));
font-size: calc(16px - (16 - 12) / (1200 - 750) * (1200px - 100vw));
line-height: calc(200px - (200 - 180) / (1200 - 750) * (1200px - 100vw));
}
}
@media screen and (max-width:750px){
.box{
width: 280px;
height: 180px;
font-size: 12px;
line-height: 180px;
}
}
</style>
</head>
<body>
<div class="box">
这是一段测试使用的文字
</div>
</body>
</html>
效果如下：
公式总结
适配公式calc(X-(X-Y)/(A-B)*(A-100vw-C))
其中：A为区间中最大值，B为区间中最小值，C为浏览器宽度与body的差值(差值是由于可能出现的竖向滚动条导致的，例如chrome浏览器的竖向滚动条为15px)，100vw为当前body的宽度，X为区间最大值时该css属性需要的px值，Y为区间最小值时该css属性需要的px值
鉴于C值它有可能有有可能没有，出现有点随缘的情况。例如上面的例子中就没有出现滚动条,咱直接永久干掉它就可以不用在公式中减C了（能发现这个离谱操作的主要原因是UI老哥他的浏览器设置了不显示滚动条）
body::-webkit-scrollbar{
none
}
俺只考虑谷歌、safari、edge浏览器的兼容问题，-webkit就够用了，兄弟们如果要适配火狐和IE得自己查查
另外大家也可以看出，该公式是一个二元一次方程，就是一条直线，是做不到由快到慢的或者由慢到快的改变的，中间偶尔会看到有抖动，如果有哪个老哥能来个优化，欢迎评论区留言
