Bootstrap 5.1媒体查询在屏幕旋转时不生效问题求助

环境：Bootstrap 5.1、VS 2022 Pro

用户设置的媒体查询在屏幕旋转时未生效，相关代码如下：

Razor页面代码 #

@page "/"

<div class="d-flex flex-row bg-secondary">
    <div class="p-2 bg-info">
        <div class="txl">Widget 1</div>
        <div class="txn">55</div>
        <div class="txl">Widget 2</div>
        <div class="txn">55</div>
        <div class="txl">Widget 3</div>
        <div class="txn">55</div>
    </div>
    <div class="p-2 bg-warning">
        <div class="nsl">Widget ID</div>
        <div class="nsn">55</div>
    </div>
</div>

CSS代码 #

html {
}

@media (max-width: 845px){
    html {
        font-size: 2px;        
    }
}

.txl {
    font-size: 4.75rem;
    
}

.txn {
    font-size: 10rem;
}

.nsl {
    font-size: 7rem;
}

.nsn {
    font-size: 35rem;
    line-height: 30rem;
    text-align: center;
    margin-bottom: 0.25rem;
}

问题分析 #

媒体查询未生效的核心原因是页面缺少响应式视口（viewport）元标签。Bootstrap的响应式布局依赖该标签让浏览器识别设备实际宽度，否则移动端浏览器会默认以桌面端宽度渲染，导致屏幕旋转时无法正确触发max-width:845px的媒体查询条件。

解决方案 #

1. 添加Viewport元标签 #

在页面的<head>区域（通常在_Layout.cshtml或当前Razor页面的头部）添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

该标签会让浏览器以设备的实际宽度作为视口宽度，确保屏幕旋转时能正确识别当前宽度，触发对应的媒体查询。

2. 验证媒体查询触发条件 #

通过浏览器开发者工具（F12）的设备模拟功能，切换横竖屏查看视口宽度，确认是否满足max-width:845px的条件。如果需要适配更通用的移动端场景，可参考Bootstrap的默认断点（如max-width:768px对应平板竖屏）调整媒体查询的宽度值。

3. 可选：直接覆盖类的字体大小 #

若不想通过修改html的font-size控制rem，可直接在媒体查询中覆盖各元素类的字体大小，优先级更明确：

@media (max-width: 845px){
    .txl {
        font-size: 1.5rem;
    }
    .txn {
        font-size: 3rem;
    }
    .nsl {
        font-size: 2rem;
    }
    .nsn {
        font-size: 10rem;
        line-height: 8rem;
    }
}

效果验证 #

添加viewport元标签后，刷新页面并测试屏幕旋转，媒体查询即可正常触发，字体大小会随屏幕宽度变化而调整。

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