单屏页面布局常用工具方法
dynamicRem
: 单屏页面时,既需要根据屏幕宽度也需要根据屏幕高度进行rem
设置 (常规rem
方案,仅使用屏幕宽度进行等比例划分)
forceLandscape
: 强制元素横屏方案
npm install single-screen-utils
yarn add single-screen-utils
dynamicRem
普通方法
import { dynamicRem } from 'single-screen-utils';
// 返回一个销毁函数
const destroy = dynamicRem();
hooks
方法
import { useDynamicRem } from 'single-screen-utils';
const App = () => {
// 自动销毁
useDynamicRem();
return (
<div id="app">App</div>
)
};
forceLandscape
普通方法
import { forceLandscape } from 'single-screen-utils';
// 返回一个销毁函数
const destroy = forceLandscape();
hooks
方法
import { useForceLandscape } from 'single-screen-utils';
const App = () => {
// 自动销毁
useForceLandscape();
return (
<div id="app">App</div>
)
};
dynamicRem
: 根据页面宽高比动态设置html的rem大小
参数:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
pageWidth | 设计稿的宽度 (px) | number | 750 |
pageHeight | 设计稿的高度 (px) | number | 1334 |
pageFontSize | 页面html元素的字体 (px) | number | 100 |
pageAspectRatio | 页面宽高比 | number | pageWidth / pageHeight |
mode | 横屏模式/竖屏模式 | ModeType.portrait | ModeType.landscape | ModeType.portrait 竖屏 |
返回值:
返回一个函数,调用此函数取消事件监听
类型 | 说明 |
---|---|
(resetFontSize?: string | number) => void | 取消rem动态设置,还原默认的字体 |
静态常量:
dynamicRem.ModeType.portrait
竖屏模式 (0)
dynamicRem.ModeType.landscape
横屏模式 (1)
forceLandscape
: 强制元素横屏
参数:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
Id | 需要强制横屏的元素id | string | #app |
detectType | 判断是否横屏的依据 DetectType.size 宽度比高度大,认为是横屏 DetectType.orientation 设备方向是90或者-90,认为是横屏 |
DetectType.size | DetectType.orientation | DetectType.size |
delay | 防抖时间(ms) | number | 800 |
onForceResize | 强制转换元素时的回调方法 | function | (isLandscape: boolean) => void |
返回值:
返回一个函数,调用此函数取消事件监听
类型 | 说明 |
---|---|
() => void | 取消事件监听,不再强制横屏 |
静态常量:
forceLandscape.DetectType.size
宽度比高度大,认为是横屏 (0)
forceLandscape.DetectType.orientation
设备方向是90或者-90,认为是横屏 (1)
yarn install
npm run dev
npm run build