screen-flexible

Adaptive solution for screen page.

Language

• 中文

Installation

npm install screen-flexible

Usage

The screen resolution is: 1920*1080

import 'screen-flexible/dist/auto'

The screen resolution is custom, eg: 1600*1000

import { bindResize } from 'screen-flexible'

bindResize({ width: 1600, height: 1000 }) // this will call `bodyResize`

OR

import { bodyResize } from 'screen-flexible'

let timer
window.addEventListener('resize', () => {
  clearTimeout(timer)
  timer = setTimeout(() => { bodyResize(1600, 1000) }, 300)
})

bodyResize(1600, 1000)

Type option

import { bodyResize } from 'screen-flexible'

/**
 * Types of resize method
 * 'padding': default, use the minimum axis scale and maximum axis will be padding with blank
 * 'width': use the x-axis scale
 * 'height': use the y-axis scale
 * 'full': use both x-axis and y-axios scale to fullfill the screen
*/

let timer
window.addEventListener('resize', () => {
  clearTimeout(timer)
  timer = setTimeout(() => { bodyResize(1920, 1080, 'full') }, 300)
})

bodyResize(1920, 1080, 'full')