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

Arthur
2021-08-05 / 0 评论 / 175 阅读 / 正在检测是否收录...

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

为了自适应各种屏幕的大小,比如手机上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);
}

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

13
如果你觉得文章还不错,可以请我喝杯咖啡啊哈哈哈
wechat alipay

评论 (0)

取消