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

相关推荐
一斤代码6 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨7 分钟前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组13 分钟前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina43 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏2 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js