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

相关推荐
·云扬·11 分钟前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭37 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle42 分钟前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
Thomas_YXQ1 小时前
Unity URP法线贴图实现教程
开发语言·unity·性能优化·游戏引擎·unity3d·贴图·单一职责原则
WildBlue1 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷1 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js