Nuxt.js网站横竖屏切换后布局异常问题求助

问题描述 #

基于Nuxt.js开发的网站，使用自定义CSS+Tailwind CSS，遇到响应式布局异常：

• 竖屏加载正常，切换横屏也正常
• 切回竖屏后，顶部菜单区域一半出现红色背景，菜单变窄缩小，主区域文字移位且变小
• 移除页面中的canvas动画元素后，响应式功能完全恢复正常

MyHeader.vue组件代码 #

<template>
    <div
      class="bg-white text-purple-600 w-full"
      :class="{ 'absolute w-full h-screen top-0 left-0': menu }">
      <div class="container ww-full sm:mx-auto flex flex-wrap">

        <div class="w-auto p-3">
        <!-- Can add opitonal text on left side -->
        </div>

        <!-- Desktop nav list -->
        <nav class="hidden sm:block">
          <ul class="flex">
            <li
              v-for="(item, index) in items"
              :key="index">

              <NuxtLink class="hover:bg-gray-300 p-3 block" :to="item.href">{{item.title}}</NuxtLink>

            </li>
          </ul>
        </nav>

        <div class="ml-auto sm:hidden p-3" @click="$event => menu = !menu">
          <i class="fa fa-bars"></i>
        </div>
            
      </div>

      <!-- Mobile nav list -->
      <nav v-show="menu" class="w-full">
        <ul class="flex flex-col text-center">
        <li
          v-for="(item, index) in items" :key="index">

          <NuxtLink class="hover:bg-gray-300 p-3 block" 
          :to="item.href">{{item.title}}</NuxtLink>
  
        </li>
        </ul>
      </nav>
    

    </div>
</template>

<script>
  export default {     
    data() {
      return {
        menu: false,
        items: [
          { title: 'Linux', href: '/networking' },
          { title: 'WebDev', href: '/webdev' },
          { title: 'Biz', href: '/enterprise' },
          { title: 'Coding', href: '/coding' }
        ]
      }
    }
  }
 </script>

主页面嵌入代码 #

<div class="bg-black">

<!--<img src="../assets/logo.svg" width="100px" alt="logo" /><br clear="all" />-->

    <MyHeader class="w-full" />
    <canvas class="bg-black" ref="canvas"></canvas>

    <div class="absolute text-white text-center 
    uppercase tracking-wide w-full max-w-2xl
    px-6" style="top: 50%; transform:translate(-50%, -50%); left: 50%;
    width: 100%;" id="container">

    <h1 id="patrickKennedy" class="font-laoX text-sm
      opacity-0" style="transform:translateY(30px)"> Patrick Kennedy</h1>

    <p class="font-exo2 text-4xl opacity-0" id="oneWithAn" style="transform:translateY(30px)">
      Information Technology guru available for worldwide assignments
    </p>
  
    <a class="font-mono-space border px-4 py-2
       rounded-lg text-sm uppercase mt-8
       hover:bg-white hover:text-gray-800
       inline-block opacity-0" id="viewWorkBtn" style="transform:translateY(30px)"
       href="#">View Work</a>
    
  </div>
</div>

自定义CSS #

/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #ff0000;
}

排查与修复方案 #

核心问题分析 #

canvas元素未做响应式尺寸处理，横竖屏切换时，canvas的默认固定尺寸会干扰浏览器的布局计算，导致重排重绘异常；同时绝对定位元素的依赖基准因canvas尺寸变化发生偏移，引发连锁布局问题。

修复步骤 #

1. 给canvas添加响应式样式约束
   为canvas设置自适应尺寸，避免固定尺寸破坏布局：

   canvas {
     display: block; /* 清除inline元素默认基线间距 */
     width: 100vw; /* 占满视口宽度 */
     height: auto; /* 保持宽高比 */
     max-height: calc(100vh - 60px); /* 预留头部菜单高度，可根据实际调整 */
   }
   

   或直接用Tailwind类替代：canvas class="bg-black w-full h-auto block"

2. 监听窗口resize事件，重置canvas绘图分辨率
   canvas的width/height属性是绘图分辨率，和CSS样式尺寸分离，需动态同步：

   export default {
     mounted() {
       this.resizeCanvas()
       window.addEventListener('resize', this.resizeCanvas)
     },
     beforeUnmount() {
       window.removeEventListener('resize', this.resizeCanvas)
     },
     methods: {
       resizeCanvas() {
         const canvas = this.$refs.canvas
         if (!canvas) return
         // 同步绘图分辨率与显示尺寸
         canvas.width = canvas.offsetWidth
         canvas.height = canvas.offsetHeight
         // 这里重新调用你的动画初始化/重绘逻辑
         // initCanvasAnimation()
       }
     }
   }
   

3. 修正头部菜单布局错误

   • 根div中的ww-full是笔误，改为w-full
   • 添加relative定位，避免菜单切换为绝对定位时脱离文档流导致布局坍塌：

     <div
       class="bg-white text-purple-600 w-full relative"
       :class="{ 'absolute w-full h-screen top-0 left-0': menu }">
     

4. 优化绝对定位文本容器
   用Tailwind内置类替代内联样式，减少冲突：

   <div class="absolute text-white text-center 
     uppercase tracking-wide w-full max-w-2xl
     px-6 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" 
     id="container">
   

验证方法 #

修改后反复切换横竖屏，检查菜单背景、文字排版是否恢复正常；确认canvas动画在不同尺寸下仍能正常渲染。

内容的提问来源于stack exchange，提问作者Patrick