# 折叠屏展开态和折叠态下呈现的内容不一致

#### 问题现象

折叠屏展开态和折叠态打开同一页面时，展开态部分内容缺失。

#### 背景知识

*   Web：提供具有网页显示能力的Web组件。在Web开发中，使用@media实现自适应布局是响应式设计的核心技术，主要通过媒体查询动态调整样式以适应不同设备屏幕。
*   使用DevTools工具调试前端页面：Web组件支持使用DevTools工具调试前端页面。DevTools是Web前端开发调试工具，支持在电脑上调试移动设备前端页面。

#### 问题定位

1.  使用DevEco Testing查看页面布局，发现该页面使用了Web组件。
    

2.  使用开发者工具或DevTools查看Web页面布局，发现在折叠态尺寸下，使用了@media自适应布局，示例代码如下：
    
    ```
    @media (min-device-width: 320px) and (max-width: 689px), (max-device-width: 480px) {
      .w1200 {
        width: 100%;
      }
    }
    ```
    
    在展开态尺寸下，使用了固定布局，示例代码如下：
    
    ```
    .w1200 {
      width: 1200px;
      margin: 0 auto;
    }
    ```
    

#### 分析结论

当前Web页面在折叠屏展开态下，使用了固定布局，使部分页面被遮挡，导致与折叠态呈现的内容不一致。

#### 修改建议

在折叠屏展开态尺寸下，使用@media媒体查询响应式布局，具体可参考官方示例。