30 lines
680 B
JavaScript
30 lines
680 B
JavaScript
import { useWindowSize } from '@vueuse/core'
|
|
import { viewports } from '@/libs/theme'
|
|
|
|
const { width: wWidth, height: wHeight } = useWindowSize()
|
|
|
|
export default () => {
|
|
// Desktop
|
|
const dvw = (pixels) => {
|
|
return (pixels / viewports.desktop.width) * wWidth.value
|
|
}
|
|
const dvh = (pixels) => {
|
|
return (pixels / viewports.desktop.height) * wHeight.value
|
|
}
|
|
|
|
// Mobile
|
|
const mvw = (pixels) => {
|
|
return (pixels / viewports.mobile.width) * wWidth.value
|
|
}
|
|
const mvh = (pixels) => {
|
|
return (pixels / viewports.mobile.height) * wHeight.value
|
|
}
|
|
|
|
return {
|
|
dvw,
|
|
dvh,
|
|
mvw,
|
|
mvh,
|
|
}
|
|
}
|