背景需求:前端大屏适配
说明:项目大屏,使用scale适配是最快且有效的(等比缩放)。
效果:
补充: 等比缩放时,项目的上下或者左右是肯定会有留白的,这个不管是rem,还是scale都会出现的问题,除非你不是等比缩放。才不会有留白。
如何处理留白: 建议留白的部分用大屏相近的背景图去覆盖就好了。
如何让项目不留白: 各个分辨率下都不留白,那你的项目只能是非等比缩放。建议使用rem+其他的响应式方法(比如媒体查询,百分比布局,flex,vh/vw单位)
scale使用步骤:
html部分:
<div className="screen-wrapper">
<div className="screen" id="screen">
</div>
</div>
js部分:
<script>
export default {
mounted() {
// 初始化自适应 ----在刚显示的时候就开始适配一次
handleScreenAuto();
// 绑定自适应函数 ---防止浏览器栏变化后不再适配
window.onresize = () => handleScreenAuto();
},
deleted() {
window.onresize = null;
},
methods: {
// 数据大屏自适应函数
handleScreenAuto() {
const designDraftWidth = 1920; //设计稿的宽度
const designDraftHeight = 960; //设计稿的高度
// 根据屏幕的变化适配的比例
const scale =
document.documentElement.clientWidth /
document.documentElement.clientHeight <
designDraftWidth / designDraftHeight
? document.documentElement.clientWidth / designDraftWidth
: document.documentElement.clientHeight / designDraftHeight;
// 缩放比例
document.querySelector(
'#screen',
).style.transform = `scale(${
scale}) translate(-50%, -50%)`;
},
},
};
</script>
css部分:
/*
除了设计稿的宽高是根据您自己的设计稿决定以外,其他复制粘贴就完事
*/
.screen-root {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px; //设计稿的宽度
height: 960px; //设计稿的高度
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
}
}
如果你不想分别写html,js和css,那么你也可以使用v-scale-screen插件来帮你完成
使用插件参考:https://juejin.cn/post/7075253747567296548
参考文章:https://juejin.cn/post/7163932925955112996#heading-11
本文的项目源码地址:https://github.com/rui-rui-an/scale