DDAC/app/layouts/mobile.vue

<template>
  <div class="mb-layout">
    <Header />
    <main class="mb-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 (!import.meta.client) return
  const screenWidth = document.documentElement.clientWidth

  // if (screenWidth >= TABLET_BREAKPOINT) {
  //   document.documentElement.style.fontSize = MAX_FONT_SIZE + 'px'
  //   return
  // }

  const baseFontSize = screenWidth / 10
  document.documentElement.style.fontSize = baseFontSize + 'px'
}
useHead({
  script: [
    {
      innerHTML: `
        (function() {
          var screenWidth = document.documentElement.clientWidth;
            document.documentElement.style.fontSize = screenWidth / 10 + 'px';
        })();
      `,
      type: 'text/javascript',
      tagPosition: 'head',
      key: 'rem-init'
    }
  ]
})

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

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

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

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