Functions
getScaled()
getScaled(
dom
):object
获取元素的缩放比例
Parameters
Parameter | Type | Description |
---|---|---|
dom | MaybeNil <ScaleDomElement > | 缩放的 DOM 元素 |
Returns
object
x
x:
number
y
y:
number
revertScaled()
revertScaled(
dom
):void
还原缩放效果,仅对该函数已缩放元素有效
Parameters
Parameter | Type | Description |
---|---|---|
dom | MaybeNil <ScaleDomElement > | 缩放的 DOM 元素 |
Returns
void
scaleDom()
scaleDom(
dom
,options
):void
根据当前窗口大小与设计稿大小比例缩放指定元素
Parameters
Parameter | Type | Description |
---|---|---|
dom | MaybeNil <ScaleDomElement > | 指定元素 |
options | ScaleDomOptions | 配置项 |
Returns
void
Example
ts
// 设计稿大小
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);'