响应式文本显示问题：屏幕宽度400px时内容不显示，如何修复？

需求说明：

• 屏幕宽度≤400px时显示narrow
• 屏幕宽度＞400px时显示large

当前代码在屏幕宽度刚好为400px时两段文本均不显示，核心原因是两个媒体查询在400px时会同时生效：

• @media screen and (min-width: 400px)会隐藏.hide-if-large（即narrow文本）
• @media screen and (max-width: 400px)会隐藏.hide-if-narrow（即large文本）

最终导致两个元素都被设置为display: none，因此看不到任何内容。

方案一：调整大屏触发的最小宽度为401px #

修改大屏媒体查询的阈值，让其仅在屏幕宽度大于400px时生效，400px及以下保持显示narrow：

@media screen and (min-width: 401px) {
    .hide-if-large {
        display:none
    }    
}

@media screen and (max-width: 400px) {
    .hide-if-narrow {
        display: none;
    }
}

方案二：调整窄屏触发的最大宽度为399px #

修改窄屏媒体查询的阈值，让其仅在屏幕宽度小于400px时生效，400px及以上保持显示large：

@media screen and (min-width: 400px) {
    .hide-if-large {
        display:none
    }    
}

@media screen and (max-width: 399px) {
    .hide-if-narrow {
        display: none;
    }
}

修改后验证效果：

• 屏幕宽度≤400px：仅显示narrow（方案一）/ 仅显示large（方案二）
• 屏幕宽度＞400px：仅显示large（方案一）/ 仅显示large（方案二）
• 屏幕宽度恰好为400px：只会触发单个媒体查询，不会出现文本全部隐藏的问题，完全符合需求。

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