css - CSS Media 查询在浏览器中放大时行为异常,但在重新调整窗口大小时不会
问题描述
因此,我完成了为我的网站编写的媒体查询,以使用 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 块负责的 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 大小的规则都可以正常工作。
解决方案
我认为一切都应该工作。你能分享两个页面大小的屏幕截图吗?很可能您已经知道这一点,但我还是要重复一遍。如果您在 chrome 中打开页面,然后在样式选项卡中右键单击/检查,您可以在更改大小时看到哪些规则应用于您的页面。
推荐阅读
- nsubstitute - 如何验证替代者根本没有接到任何电话?
- model-view-controller - 如何访问 ASP .NET MVC URL?
- asp.net-core - .Net core 3.1 自定义认证
- c# - 我的 Blazor WebAssembly 应用程序中的这些 GC Minor Nursery Full 日志消息试图告诉我什么?
- stripe-payments - Stripe 订阅升级导致不需要的发票项目
- javascript - React/Jasvascript:地图函数中的动态类名设置
- python - 从公式创建 statsmodels 模型时出现语法错误
- sql - 调试存储过程
- javascript - 如何从项目列表中过滤掉
- java - Java JPanel 清除图形