Итак, я закончил написание медиазапросов для моего сайта, чтобы сделать его отзывчивым, используя встроенную функцию Chrome Dev Tools 'Toggle device toolbar'.Все работает нормально, если я изменяю размер окна просмотра, но если я хочу проверить адаптивный дизайн, увеличив масштаб, большинство правил 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;
}
}
Вот фрагмент кода HTML, за который отвечает этот блок css (сайт написан в реакции):
<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'ов, прекрасно работают, независимо от того, масштабирую я или изменяю размер окна моего браузера.