搜索到
8
篇与
css
的结果
-
![动态计算自适应css大小公式]()
动态计算自适应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); } 尝试切换一下分辨率 你会发现 属性值 随着分辨率大小而改变咯 -
![常见css基础题]()
