UI还原度小技巧之缩放

还原度小技巧之缩放

• • • 背景
    • 缩放

背景

我们经常会遇到UI给的设计图尺寸较大，和我们浏览器相差太大，这时候，按照UI给的尺寸直接写进代码里面的话，可能会让页面结构在我们的浏览器上面显得很大，产生横向滚动条等，明明是按照设计稿的尺寸，怎么做出来感觉和设计稿两模两样。

我们可以考虑试试想一下，将设计稿全铺满浏览器的想法，这要求我们设计稿根据我们的浏览器大小而跟随变化。我们主要考虑宽的适配。按照这样的适配方式，那我们做出来的页面就是比较符合设计稿在浏览器的展示效果。

缩放

关键代码：

js部分

// 计算设计稿宽与浏览器的缩放比例
 toolViewRatio = (width = 1920) => {
	// 假设设计稿宽度默认为1920
	const designWidth = width || 1920;
	// 浏览器宽度
	const screenWidth = window.innerWidth;
	// 计算缩放比例
	const scale = screenWidth / designWidth;
	return scale;
};

页面中使用

只需要在页面外层的元素上添加这个样式，就可以完成缩放啦

transform: scale(${scale})