Odin Project响应式头部布局疑问：多端适配是否需用display:none模拟双HTML

我正在完成Odin Project的高级HTML/CSS响应式设计项目，已完成桌面版头部布局——采用flex布局将图片与文本分为两个独立容器。针对平板端，我计划将图片移入文本容器，通过float:left结合position:relative实现文本环绕图片的效果，但不确定在media query中使用display:none模拟两套HTML是否属于不良实践，请问是否有更优的实现方案？

当前桌面版HTML代码 #

<header>
    <div class="picture-container">
        <figure class="fig"><img class="presentation-photo" src="./asset/images/photo_identite.jpeg" alt=""></figure>
        <figcaption class="caption">Aymeric SABRIÉ</figcaption>
    </div>
    
    <div class="text-container">
        <h2 class="header-title">About me</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        <div class="icon-container">
            <a href="https://github.com/aymerrric" aria-label="github"><img src="./asset/images/github.svg" alt="github icon" class="icon"></a>
            <a href="https://www.linkedin.com/feed/" aria-label="linkedin link"><img src="./asset/images/linkedin.svg" alt="linkedin icon" class="icon"></a>
            <a href="https://x.com/filao14" aria-label="X link"><img src="./asset/images/twitter.svg" alt="twitter icon" class="icon"></a>
        </div>
    </div>
</header>

当前桌面版CSS代码 #

body{
    display: flex;
    align-items: center;
    flex-direction: column;
}

header{
    position: relative; 
    padding: 20px;
    max-width: 1200px;
    min-width: 1080px;
    display: flex;
    align-items: center;
}

body::before{
    width: 100%;
    display: block;
    background-color: #0891b2;
    min-height: 550px;
    position: absolute;
    content: "";
    z-index: -0.5;
    transform: skew(0,-10deg);
    top: -200px;
}

.text-container{
    max-width: 450px;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    gap: 5px  ;
    z-index: 0;
}

.presentation-photo{
    max-width: 300px;
}

header>*{
    box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.233);
}

.icon{
  width: 20px;
  height: auto;
}

.icon-container{
  display: flex;
  gap: 10px;
  align-self: flex-end;
  margin-top: auto;
}

.header-title{
  font-family:"Playfair Display";
}

.text-container{
  font-family: "Roboto";
}

.picture-container{
  position: relative;
}

.caption{
  position: absolute;
  bottom: 0;
  padding: 10px;
  font-size: 2.2rem;
  color: white;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;  
}

布局参考 #

• 平板端：文本环绕图片的排版
• 桌面端：图片与文本容器并排的flex布局

首先明确：用display:none模拟两套HTML属于不良实践——会增加冗余代码、降低可维护性，还可能影响屏幕阅读器等辅助设备的兼容性。完全可以基于现有HTML结构，通过CSS媒体查询调整布局实现平板端效果，具体步骤如下：

1. 移除桌面版固定宽度限制 #

先修改header的min-width，避免平板端出现横向滚动条：

header{
    /* 移除min-width: 1080px; */
    max-width: 1200px;
    width: 100%; /* 让header自适应父容器宽度 */
}

2. 平板端媒体查询布局调整 #

假设平板端断点为max-width: 1024px，在媒体查询中做以下调整：

@media (max-width: 1024px) {
    /* 1. 改变header的flex方向为垂直排列 */
    header{
        flex-direction: column;
        padding: 10px;
        background-color: white;
        box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.233);
    }

    /* 2. 让图片容器浮动到文本左侧 */
    .picture-container{
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
        position: relative;
        box-shadow: none; /* 取消单独阴影，避免和header阴影重叠 */
    }

    /* 3. 调整文本容器为块级布局，让文本自然环绕图片 */
    .text-container{
        max-width: 100%;
        min-height: auto;
        display: block; /* 替换flex布局，恢复文本正常流 */
        padding: 20px;
        box-shadow: none;
    }

    /* 4. 缩小图片尺寸适配平板 */
    .presentation-photo{
        max-width: 200px;
    }

    /* 5. 调整标题和图标的位置 */
    .header-title{
        margin-top: 0;
    }

    .icon-container{
        justify-content: flex-end;
        margin-top: 15px;
    }

    /* 6. 调整caption样式，避免遮挡文本 */
    .caption{
        font-size: 1.5rem;
        white-space: normal;
        width: 100%;
        box-sizing: border-box;
    }

    /* 7. 取消header子元素的单独阴影 */
    header>*{
        box-shadow: none;
    }
}

3. 额外优化点 #

• 可给图片容器添加margin-bottom，避免文本紧贴图片底部；
• 调整body伪元素的transform: skew参数，适配平板端布局高度；
• 给caption设置max-width: 100%，确保不会超出图片范围。

这种方案完全复用现有HTML结构，无冗余代码，同时保持了布局的响应式灵活性，符合现代CSS最佳实践。

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