在浏览器中缩放时 CSS Media 查询行为不当，但在调整窗口大小时则不会

Question

因此，我完成了为我的网站编写媒体查询，以使用 Chrome 开发工具的“切换设备工具栏”内置功能使其响应。如果我调整浏览窗口的大小，一切正常，但如果我想通过放大来测试响应式设计，则不会应用大多数 css 规则。

这里有两个媒体查询:

@media  screen and (max-width: 600px) {

    #main-text-container{
    position: absolute;
    left:10vw;
    top:20vh;
    color:white;
    width:50vw;
}

.icon{
    width:4px;
    height:4px;
}

.item-name{
    font-size:1rem;
}

#title-down{
    font-size:1.9rem;
}

#title-up{
    font-size:1.2rem;
}

#description{
    font-size:1rem;
}
}

@media  screen and (max-width: 400px) {

    #main-text-container{
    position: absolute;
    left:10vw;
    top:20vh;
    color:white;
    width:50vw;
}

.icon{
    width:1px;
    height:1px;
}

.item-name{
    font-size:0.7rem;
}

#title-down{
    font-size:1.3rem;
}

#title-up{
    font-size:0.8rem;
}

#description{
    font-size:0.8rem;
}

#map-button{
    font-size:0.8rem;
}
}

这是这个css block 负责的HTML片段(网站是用react写的):

<div id="main-flex-continer">
                <Navbar color={this.state.navbarColor}></Navbar>
                <div id="image-container">
                    <img id="main-image" src={backgroundImage} 
alt="bozioru"></img>
                    <div id="main-text-container">
                        <h2 id="title-up">Așezările Rupestre</h2>
                        <h1 id="title-down">Bozioru</h1>
                        <br className="sm-break"></br>
                        <p id="description">O întoarcere în peisajul 
creștinismului timpuriu,
                        unde pietrele spun povestea locului de la începutul 
istoriei și până acum.</p>
                        <button id="map-button" onClick= 
{this.redirectToMap}>Către hartă</button>
                        {this.state.redirect}
                    </div>
                </div>
</div>

如果我缩放，则不会应用负责调整字体大小的任何 css 规则。另一方面，无论我缩放还是调整浏览器窗口大小，调整 div 大小的规则都可以正常工作。

Answer 1

我认为一切都应该有效。你能分享两个页面大小的截图吗？ 很可能你已经知道这一点，但我还是要重复一遍。如果您在 chrome 中打开您的页面，然后在样式选项卡中右键单击/检查，您可以看到在更改大小时哪些规则应用于您的页面。