大屏适配方案
现有大屏实现方案:
一、页面元素定位使用rem
定义父级大小,之后进行组件的height、margin、padding等多种css属性采用rem作为单位,实现适配
二、大屏内容居中展示
做法类似于查看图片的展示,当比例不同时,保证设计比例,内容居中展示
function setHtmlFontSize() {
const cliW = doc.clientWidth;
const cliH = doc.clientHeight;
// 设计稿的尺寸:2560*1440, 比例为16/9
const defaultW = 2560;
const defaultH = 1440;
// 为保证大屏完全展示,做法类似查看图片的展示,当比例不同时,保证设计比例,内容居中显示
const widthRatio = cliW / defaultW;
const heightRatio = cliH / defaultH;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const fontSize = ratio * 100;
// 将100px 作为 1rem,设计稿为 2560 * 1440
doc.style.fontSize = `${fontSize.toFixed(3)}px`;
that.props.dispatch({
type: 'realTimeDynamicDisplay/overrideStateProps',
payload: {
fontSize,
},
});
}
缺点:对于UI组件的呈现不是很友好。因为组件的很多默认属性是以 px 为单位。如line-height的设置为22px,此时覆盖样式后的字体过大,并不能适应行高,就会出现文字重叠等错乱问题
调研方案:
通过CSS3的缩放 transform: scale(X) 属性,来控制大屏的展示
方式:只需要监听浏览器窗口的大小,同时控制变化的比例即可。
使用库:npm install @fit-screen/react
使用函数:
const 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%)`;
};
DEMO
import React, { useEffect } from 'react';
import styles from './index.less';
const Index = () => {
//数据大屏自适应函数
const 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%)`;
};
//React的生命周期 如果你是vue可以放到mountd或created中
useEffect(() => {
//初始化自适应 ----在刚显示的时候就开始适配一次
handleScreenAuto();
//绑定自适应函数 ---防止浏览器栏变化后不再适配
window.onresize = () => handleScreenAuto();
//退出大屏后自适应消失 ---这是react的组件销毁生命周期,如果你是vue则写在deleted中。最好在退出大屏的时候接触自适应
return () => window.onresize = null;
}, []);
return (
<div id="screen" className={styles.stl}>
阿莱克斯的减肥撒好地方
</div>
);
};
export default Index;