scaleDom

Namespaces

• scaleDom

Functions

scaleDom()

scaleDom(dom, options): void

根据当前窗口大小与设计稿大小比例缩放指定元素

Parameters

Parameter	Type	Description
dom	MaybeNullish<ScaleDomElement>	指定元素
options	ScaleDomOptions	配置项

Returns

void

Example

// 设计稿大小
const designSize = {
  designWidth: 1920,
  designHeight: 1080,
}

// getWindowSize()
{ width: 3840, height: 2160 }

// 缩放根元素
scaleDom(document.documentElement, { ...designSize, mode: 'both' })

document.documentElement.style
// => 'width: 1920px; height:1080px; transform-origin:top left; transform: scale(2, 2);'

// 单一元素缩放
scaleDom(document.querySelector('.card'), {
  designWidth: 1920,
  designHeight: 1080,
  elementWidth: 300,
  elementHeight: 200,
})

.card
// => 'width: 300px; height:200px; transform-origin:top left; transform: scale(2, 2);'

Interfaces

ScaleDomOptions

Properties

Property	Type	Description
designHeight?	number	设计稿的高度，用于计算缩放比例 Default 1080
designWidth?	number	设计稿的宽度，用于计算缩放比例 Default 1920
elementHeight?	number	元素在设计稿的高度，用于固定元素高度 Default options.designHeight
elementWidth?	number	元素在设计稿的宽度，用于固定元素宽度 Default options.designWidth
mode?	"x" | "y" | "both"	缩放模式
origin?	string	缩放基准位置，等同于更改指定元素的 style.transformOrigin Default 'top left'
override?	boolean	若指定 DOM 已存在需要缩放更改的属性（width、height、transform）时是否覆盖 Default true
parentHideOverflow?	boolean	缩放时需更改 width、height 属性，可能导致元素溢出，是否为父级设置 overflow: hidden Default true
precision?	number	小数精度 Default 6