refactor(mobile): 移除响应式断点样式并改用rem适配

移除main.scss中的媒体查询断点定义，改为在mobile.vue中动态计算根字体大小。
删除Header.vue中注入的headerHeight属性和mobile.vue中的平板模式判断逻辑。
简化布局样式，统一移动端与平板的间距处理。

app/assets/scss/main.scss

@@ -12,31 +12,6 @@ html {
   font-family: 'Source Han Sans CN', sans-serif;
 }
 
-// 断点定义
-// - mobile: ≤ 767px (手机)
-// - tablet: 768px - 1024px (平板)
-// - desktop: > 1024px (桌面端)
-
-// 手机端断点 (≤ 767px)
-@media (max-width: 767px) {
-  html {
-    font-size: clamp(32px, 10vw, 46px);
-  }
-}
-
-// 平板断点 (768px - 1024px)
-@media (min-width: 768px) and (max-width: 1024px) {
-  html {
-    font-size: clamp(37.5px, 5vw, 45px);
-  }
-}
-
-// 平板横屏适配 (1025px - 1280px)
-@media (min-width: 1025px) and (max-width: 1280px) {
-  html {
-    font-size: 42px;
-  }
-}
 html,
 body,
 ul,

app/components/mobile/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header class="mb-header">
-    <div class="mb-header-container" :style="{ height: headerHeight }">
+    <div class="mb-header-container">
       <a href="/mobile" class="brand">
         <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" width="14" height="14" />
         <h1 class="brand-title">DDAC</h1>
@@ -60,8 +60,6 @@
 const isMenuOpen = ref(false)
 const isProductsOpen = ref(false)
 
-const headerHeight = inject('headerHeight')
-
 const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value
   // 关闭菜单时也关闭产品子菜单

app/layouts/mobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-layout" :class="{ 'is-tablet': isTablet }">
+  <div class="mobile-layout">
     <Header />
     <main class="mobile-layout-main">
       <slot />
@@ -12,21 +12,21 @@
 import Header from '~/components/mobile/Header.vue'
 import Footer from '~/components/mobile/Footer.vue'
 
-const { width } = useWindowSize()
-
-// 平板断点: 768px - 1024px
-const isTablet = computed(() => width.value >= 768 && width.value <= 1024)
+const setRem = () => {
+  if (!process.client) return
+  const screenWidth = document.documentElement.clientWidth;
+  const baseFontSize = screenWidth / 10;
+  document.documentElement.style.fontSize = baseFontSize + 'px';
+}
 
-// 平板模式下增加内边距 (与 header 高度匹配)
-const mainPadding = computed(() => {
-  const topPadding = isTablet.value ? '70px' : '54px' // header + gap
-  return `${topPadding} ${isTablet.value ? '32px' : '16px'} ${isTablet.value ? '32px' : '16px'}`
+onMounted(() => {
+  setRem()
+  window.addEventListener('resize', setRem, { passive: true })
 })
 
-// 平板模式下 Header 高度
-const headerHeight = computed(() => isTablet.value ? '60px' : '44px')
-
-provide('headerHeight', headerHeight)
+onBeforeUnmount(() => {
+  if (process.client) window.removeEventListener('resize', setRem)
+})
 </script>
 
 <style scoped lang="scss">
@@ -42,15 +42,7 @@ provide('headerHeight', headerHeight)
 .mobile-layout-main {
   flex: 1;
   width: 100%;
-  padding: v-bind(mainPadding);
+  padding: 54px 16px 16px;
   box-sizing: border-box;
 }
-
-// 平板模式样式
-.mobile-layout.is-tablet {
-  .mobile-layout-main {
-    max-width: 1024px;
-    margin: 0 auto;
-  }
-}
 </style>