杂谈发现一只网站是你们谁做的,代理企业网站备案,做网站注意,wordpress自动部署背景 在做大屏可视化项目的时候#xff0c;一般设计稿会设计成1920 * 1080#xff0c;但是页面写死1920 * 1080在2k、4k等分辨率的屏幕下是不适配的。
方案一#xff1a;css3的缩放属性transform以及scale() 在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕…背景 在做大屏可视化项目的时候一般设计稿会设计成1920 * 1080但是页面写死1920 * 1080在2k、4k等分辨率的屏幕下是不适配的。
方案一css3的缩放属性transform以及scale() 在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示确定了实际屏幕比例按照实际屏幕比例选择一个设计稿尺寸进行设计设计稿出来后前端严格按照设计稿px进行开发页面即可。代码如下 ScreenScale.vue
templatedivclassscreen-scale:stylestyleslot/slot/div
/templatescript
export default {props: {width: {type: Number,default: 1920 //设计稿的宽度},height: {type: Number,default: 1080 //设计稿的高度}},data() {return {scale: 1};},computed: {style() {return transform:scale(${this.scale}) translate(-50%, -50%);-ms-transform:scale(${this.scale}) translate(-50%, -50%); -moz-transform:scale(${this.scale}) translate(-50%, -50%); -webkit-transform:scale(${this.scale}) translate(-50%, -50%); -o-transform:scale(${this.scale}) translate(-50%, -50%); width:${this.width}px;height:${this.height}px;;}},methods: {getScale() {//计算出缩放比let ww window.innerWidth / this.width;let wh window.innerHeight / this.height;this.scale ww wh ? ww : wh;}},mounted() {this.getScale();window.addEventListener(resize, this.getScale);},beforeDestroy() {window.removeEventListener(resize, this.getScale);}
};
/scriptstyle scoped langless
.screen-scale {transform-origin: 0 0;position: absolute;left: 50%;top: 50%;transition: 0.3s;overflow: hidden;
}
/style
App.vue
templatediv idappScreenScaleRouterView //ScreenScale/div
/template
script setup
import ScreenScale from /components/ScreenScale.vue;
/script
style
* {box-sizing: border-box;
}
html,
body {height: 100%;width: 100%;margin: 0;padding: 0;background-color: #0c1940;
}
#app {height: 100%;width: 100%;
}
/style
优点此种方法的好处就是保证字体、图片等不被拉伸变形。’ 缺点在与设计稿比例不同的屏幕下会左右或者上下出现留白。
偷懒方法v-scale-screen插件Vue大屏自适应终极解决方案
注意点如果使用到类似antd的Modal 弹窗由于Modal 默认是挂载在 body 上的这就导致ScreenScale 组件不能作用在 Modal 上解决办法就是把 Modal 挂载到组件以内的位置上。参考antdv Modal(对话框)指定挂载节点 demo
