scale实现页面缩放自适应

使用注意事项

代码中的所有的宽高是指正常视图（也指设计图）下的宽高，我的项目是大屏，所以正常视图下是 1920 * 1080，普通 PC 项目，那应该是 1920 * 937
由于缩放是对 #app 进行的操作，很多UI框架的全局弹窗无效，因为弹窗不包含在 #app 元素中，可查看框架是否有提供API指定弹窗位置，Element-ui 是有的

/*** 需要有一个 #app 元素，并有如下样式* width: 1920px; * height: 1080px;* position: absolute;* top: 50%;* left: 50%;* transform: translate(-50%, -50%);*/function setCalc () {// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。const scaleX = document.documentElement.clientWidth / 1920const scaleY = document.documentElement.clientHeight / 1080const app = document.getElementById('app')// 需要取缩放倍数较小的，因为需要宽高都兼容if(scaleX > scaleY) {app.style.transform = `translate(-50%, -50%) scale(${scaleY})`} else {app.style.transform = `translate(-50%, -50%) scale(${scaleX})`}
}
// 改变窗口大小时重新设置 rem
window.onresize = function () {setCalc()
}export default function init() {setCalc()
}

scale实现页面缩放自适应相关推荐

缩放比例页面缩放自适应布局（布局不变）vue
1. 阐述问题 : 搜索框组件(日期选择器,input ,搜索按钮)在100% 125% 150%这三个比例下,日期选择器的大小不变.(日期选择器用的element-ui的 el-data-picke ...
解决浏览器页面缩放前端页面大小自适应改变的问题
平时写前端页面的时候,css大小都在用px,现在可以采用rem的方法解决这个问题首先需要明白px与rem的区别: px是固定的像素,一旦设置了就无法适应页面的大小而进行改变. em和rem是相对长度 ...
android webview 字体被放大,Android WebView文字大小调整及页面缩放调整
释放双眼,带上耳机,听听看~! 初学者使用webview难免会面对页面缩放,展示与预期不符的问题,这里有几个处理方案: 方案一.通过屏幕密度调整分辨率 WebSettings settings = m ...
html 整体缩小zoom,页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
1.页面缩放用到的技术点 (1)zoom zoom:normal | | 默认值:normal 适用于:所有元素继承性:有可以使用用浮点数和百分比来定义缩放比例. zoom的兼容性:firefox ...
CSS 设置页面缩放
为了设置页面缩放,可以使用以下 CSS 属性: body {zoom: 80%; /* 缩放比例 */ } 或者使用以下 CSS 属性: body {transform: scale(0.8); /* ...
Echarts屏幕缩放自适应
Echarts屏幕缩放自适应当使用Echarts时,会设置他的大小,然后首次加载会自适应屏幕,但是渲染完成后,浏览器缩放时他不会自动再去渲染,还是原来的大小,不能动态自适应. 解决方法 //页面 & ...
jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下:方式1://注意:下面的代码是放在和iframe同一个页面中调用 $("#ifr ...
R语言scale函数标准化缩放dataframe数据列实战
R语言scale函数标准化缩放dataframe数据列实战目录 R语言scale函数标准化缩放dataframe数据列实战 #仿真数据
html如何禁止用户缩放,html如何禁止页面缩放
在html中,可以使用user-scalabel属性设置禁止页面缩放,只需要在mate元素中添加"user-scalabel=0"样式即可.user-scalable属性控制用户是 ...

scale实现页面缩放自适应

scale实现页面缩放自适应相关推荐

最新文章

热门文章