大屏全屏页面等比例缩放的实现

等比缩放页面，是大屏开发里比较常用的方式了。一般设计图按大屏的尺寸设计，按尺寸开发，最后等比缩放。

大屏等比缩放，我这里在layout.vue里面做控制。

layout.vue

主要是在 app-wrapper 所在div进行scale。

<template><div><divclass="app-wrapper":style="{transformOrigin: 'center top',transform: `scale(${scalseNum},${scalseNum})`,'-webkit-transform': `scale(${scalseNum},${scalseNum})`,'-moz-transform': `scale(${scalseNum},${scalseNum})`,'-o-transform': `scale(${scalseNum},${scalseNum})`,'-ms-transform': `scale(${scalseNum},${scalseNum})`,}"><!-- 头部栏 --><app-head></app-head><!-- 内容栏 --><app-main /></div></div>
</template>

scale的比例按照实际屏幕宽与1366的比例计算，如果设计图是按照别的尺寸做的，例如 1920x1080、3840*2160（4K）屏等等，在下面代码的 resize_window 方法设置对应宽度就行。

代码如下：

<script>
import { AppMain, AppHead } from './components'export default {name: 'Layout',components: {AppMain,AppHead,},data() {return {scalseNum: 1, //缩放比例}},computed: {},mounted() {//计算缩放比例this.resize_window()// 监听浏览器缩放，实时改变大屏宽高window.addEventListener('resize', () => {this.resize_window()})},methods: {//计算缩放比例resize_window() {let w_width = Number(document.documentElement.clientWidth / 1366)this.scalseNum = w_width},},
}
</script>

以上，遇到1366x768比例的大屏，基本可以自动缩放，适合做大屏幕的展示。

工程代码

整个项目的代码在下面地址，参考commit就懂过程了

大屏开发框架工程代码

前端大屏展示框架搭建（三）相关推荐

前端大屏展示框架搭建（二）
大屏基本布局实现基于element-ui进行布局. 安装安装运行依赖 element-ui 安装开发依赖 babel-plugin-component 安装插件 vue-cli-plugin-el ...
前端大屏展示框架搭建（一）
基于VS Code的代码风格统一配置项目开发很常用到,记录下搭建的过程. 基于vue-cli3新建一个项目过程已经写过了~~~ 参考这里vue-cli3新建项目基于VS Code的代码风格统一配 ...
如何使用 WEB 技术编写前端代码，实现大屏展示和地图显示功能
使用 WEB 技术编写前端代码实现大屏展示和地图显示功能可以采用以下步骤: 使用 HTML.CSS.JavaScript 等前端技术构建页面布局和样式. 使用 JavaScript 库或框架,如 jQ ...
Vuex与前端表格施展“组合拳”，实现大屏展示应用的交互增强
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 下图是一个产品开发中非常常见的大屏展示界面 ...
数据可视化、模板框架、动态控件、可视化大屏、数据监管、监控平台、图表元件库、数据看板、驾驶舱、统计图表、园区、大屏展示、安防、智慧城市、旅游、健康、医疗卫生、交通、农业、政务、AI、食品、医院、安全
数据可视化.模板框架.动态控件.可视化大屏.数据监管.监控平台.图表元件库.数据看板.驾驶舱.统计图表.园区.大屏展示.安防.智慧城市.旅游.健康.医疗卫生.交通.农业.政务.AI.食品.医院.数据安 ...
数据可视化、模板框架、动态控件、可视化大屏、数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、消防、大屏展示、安防、智慧城市、旅游、运输、医疗卫生、贸易、电力、政务、水质、工业园区环境监测
数据可视化.模板框架.动态控件.可视化大屏.数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.消防.大屏展示.安防.智慧城市.旅游.运输.医疗卫生.贸易.电力.政务.水质.工业园区环境监测 ...
大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、联勤治理、旅游、运输、车辆、校园、舆情、信息监测看板原型
大数据可视化模板.模板框架.动态控件.可视化大数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.大数据驾驶舱.大屏展示.智慧安防.党建.旅游.运输.医疗.校园.工业园区环境监测看板原型适用 ...
大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板原型
大数据可视化模板.模板框架.动态控件.可视化大数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.大数据驾驶舱.大屏展示.智慧安防.党建.旅游.运输.医疗.校园.工业园区环境监测看板原型适用 ...
前端使用echarts实现数据可视化大屏展示
1.vue中如何使用echarts完成大屏展示:移步到这里 2.原生js项目中如何使用echarts完成大屏展示:移步到这里

前端大屏展示框架搭建（三）

大屏全屏页面等比例缩放的实现

工程代码

前端大屏展示框架搭建（三）相关推荐

最新文章

热门文章