一、屏幕自适应方案
1. @media screen、%、vw vh、栅格、rem、scale缩放;
二、业务场景
1. 电脑、平板、手机三种设备自适应:
建议:
1. 做三个站点,在前端或者nginx重定向到对应的站点;
2. 大屏自适应:
建议:
1. rem(%、vw vh、栅格);
2. scale缩放;
三、scale缩放实现
/**
html部分
*/
<template>
<div className="screen-wrapper">
<div className="screen" id="screen">
</div>
</div>
</template>
/*
CSS部分 --除了设计稿的宽高是根据您自己的设计稿决定以外,其他复制粘贴就完事
*/
<style>
.screen-root {
height: 100%;
width: 100%;
.screen {
display: inline-block;
width: 1920px; //设计稿的宽度
height: 960px; //设计稿的高度
transform-origin: 0 0;
position: absolute;
left: 50%;
}
}
<style>
/**
js部分
*/
mounted(){
//初始化自适应 ----在刚显示的时候就开始适配一次
handleScreenAuto();
//绑定自适应函数 ---防止浏览器栏变化后不再适配
window.onresize = () => handleScreenAuto();
},
deleted(){
window.onresize = null;
},
methods: {
//数据大屏自适应函数
const handleScreenAuto = (): void => {
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') as any).style.transform = `scale(${scale}) translate(-50%)`;
}
}
标签:方案,scale,const,缩放,screen,适应,屏幕,document From: https://www.cnblogs.com/zhangruiqi/p/16996127.html