DDAC/app/layouts/mobile.vue

<template>
  <div class="mobile-layout">
    <Header />
    <main class="mobile-layout-main">
      <slot />
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Header from '~/components/mobile/Header.vue'
import Footer from '~/components/mobile/Footer.vue'

const setRem = () => {
  if (!process.client) return
  const screenWidth = document.documentElement.clientWidth;
  const baseFontSize = screenWidth / 10;
  document.documentElement.style.fontSize = baseFontSize + 'px';
}

onMounted(() => {
  setRem()
  window.addEventListener('resize', setRem, { passive: true })
})

onBeforeUnmount(() => {
  if (process.client) window.removeEventListener('resize', setRem)
})
</script>

<style scoped lang="scss">
.mobile-layout {
  width: 100%;
  min-height: 100vh;
  background-color: #030014;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile-layout-main {
  flex: 1;
  width: 100%;
  padding: 54px 16px 16px;
  box-sizing: border-box;
}
</style>