将页面的 设计稿等比例的进行缩放
首先是计算视觉稿到页面的比例
假设这个比例是a
a = 视觉稿的宽度/页面的宽度（document.documentElement.clientWidth）
根据这个比率去计算 屏幕上应该显示的宽度 假设这个值是 b
b = 量取的宽度/a
现在我们获取了元素在屏幕上显示的一个宽度 需要将这个宽度 和 页面的宽度绑定到一起 我们假设这个 值是 rem值 和rem单位
那么就有下面这些信息
rem值 * rem单位 = b = 量取的宽度/a = 量取的宽度 * 页面的宽度 /视觉稿的宽度
这样我们就可以得出下面的结论
rem值 = 量取的宽度
rem单位 = 页面的宽度 /视觉稿的宽度
但是 考虑到 我们的rem单位 是fontSize 所以必须要大于 1 所以我们让这个单位乘上 100 得到下面的
rem值 = 量取的宽度 / 100
rem单位 = （页面的宽度/视觉稿的宽度 ） * 100
所以我们只要每次按照psd图量取相应的大小/100 作为 rem值就可以
100% 的完美还原设计稿了
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
