动态计算自适应css大小公式

为了做到自适应分辨率和设备，写了这个快捷的公式

为了自适应各种屏幕的大小，比如手机上375px的分辨率下 一个字的大小14px 就够了，，但是 在1080p甚至4k的屏幕上，14px的字就显得太小了，，很多人喜欢用rem去实现，但是rem有个弊端，，rem的本质有点 等比放大缩小的意思，，这就涉及到一个问题，，假设在手机上375px下 展示一部分内容，，但是在4k pc下 ，这一部分内容 就算等比 放大，，会显得 特别的傻，，明明有那么多的空间可以利用，，这就可以用我现在这个放法去优化

一般的设计稿 都是提供750 和 1920 两种宽度的设计稿，，设计师不会提供你所有分辨率下的样子，，但设计师会留出 预留可控的空间，比如750下 这个标题是24px，，1920下这个标题和间距都是40px，，，那么在小分辨率电脑1366*768的屏幕下 40px就会显得比较大了，，但如果你用rem去做，，就要根据js去写很多根元素的font size大小，，但是用了我的这个方法，只要写一个css属性就可以完美解决 这个问题

• 比如 1920分辨率下 这个字号是 40px 375分辨率下字号是 20px

• 那么在 375 -> 1920 这个分辨率提升的过程中，，字号从 20px -> 40px,

• 所以可以根据这个计算出一个线性的 二元一次 方程

• 输入375， 输出20

• 输入1920 ， 输出40

• 那么可以假设 x为 输入 ，， y为输出

• 那么 设 y = ax + b

• 带入两组x y，求出a 和 b

• 这是很简单的数学知识了应该不用多说

• 假设两组数据是 x1，x2，y1,y2

• ax1 + b = y1

• ax2 + b = y2

• 换算出： a = ( y1 - y2 ) / ( x1 - x2 ) , b = ( x1y2 - x2y1 ) / ( x1 - x2 )

• 算出这个a就是输入x的倍数，，x是屏幕分辨率，a是倍数， 那 ax不就是 vw 么

• 最终得出公式，，下面上代码

function calcAdpativePixel(minWidth, maxWidth, minPixel, maxPixel) {
    let a = parseFloat((((minPixel - maxPixel) / (minWidth - maxWidth)) * 100).toFixed(2))
    let b = parseFloat((((minWidth * maxPixel) - (maxWidth * minPixel)) / (minWidth - maxWidth)).toFixed(1))
    let str = 'calc(' + a + 'vw + ' + b + 'px)'
    return str
}


输入 calcAdpativePixel(375,1920,20,40)
输出 calc(1.29vw + 15.1px)

用法

div{
    font-size: calc(1.29vw + 15.1px);
    margin-top: calc(1.29vw + 15.1px);
}

尝试切换一下分辨率 你会发现 属性值 随着分辨率大小而改变咯