Skip to content

deepred5/single-screen-utils

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

single-screen-utils

NPM version NPM downloads

单屏页面布局常用工具方法

dynamicRem: 单屏页面时,既需要根据屏幕宽度也需要根据屏幕高度进行rem设置 (常规rem方案,仅使用屏幕宽度进行等比例划分)

forceLandscape: 强制元素横屏方案

Install

npm install single-screen-utils

yarn add single-screen-utils

Quickstart

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>
  )
};

API

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)

Develop

yarn install

npm run dev

npm run build

About

单屏页面布局工具方法

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published