CSS Media запрашивает некорректную работу при масштабировании в браузере, но не при изменении размера окна - PullRequest
0 голосов
/ 02 февраля 2019

Итак, я закончил написание медиазапросов для моего сайта, чтобы сделать его отзывчивым, используя встроенную функцию 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'ов, прекрасно работают, независимо от того, масштабирую я или изменяю размер окна моего браузера.

1 Ответ

0 голосов
/ 02 февраля 2019

Я думаю, что все должно работать.не могли бы вы поделиться скриншотами размером в две страницы.Скорее всего, вы уже знаете это, но я все равно повторяю.Если вы открываете свою страницу в Chrome, щелкните правой кнопкой мыши / осмотрите на вкладке стиля и увидите, какие правила применяются к вашей странице при изменении размера.

...