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})

相关推荐
我叫小白菜1 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄1 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122462 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack3 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext3 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)4 小时前
后端快捷代码
java·开发语言
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html