还原度小技巧之缩放
- 背景
- 缩放
背景
我们经常会遇到UI给的设计图尺寸较大，和我们浏览器相差太大，这时候，按照UI给的尺寸直接写进代码里面的话，可能会让页面结构在我们的浏览器上面显得很大，产生横向滚动条等，明明是按照设计稿的尺寸，怎么做出来感觉和设计稿两模两样。
我们可以考虑试试想一下，将设计稿全铺满浏览器的想法，这要求我们设计稿根据我们的浏览器大小而跟随变化。我们主要考虑宽的适配。按照这样的适配方式，那我们做出来的页面就是比较符合设计稿在浏览器的展示效果。
缩放
关键代码：
js部分
// 计算设计稿宽与浏览器的缩放比例toolViewRatio = (width = 1920) => {// 假设设计稿宽度默认为1920const designWidth = width || 1920;// 浏览器宽度const screenWidth = window.innerWidth;// 计算缩放比例const scale = screenWidth / designWidth;return scale;
};
页面中使用
只需要在页面外层的元素上添加这个样式，就可以完成缩放啦
transform: scale(${scale})
)