потеря текста с мета-окном просмотра - PullRequest
Новая
       26

потеря текста с мета-окном просмотра

0 голосов
/ 26 января 2020

Я делаю свой первый блог и пытаюсь сделать его адаптивным, я использую мета-область просмотра, но когда я тестирую его с помощью Google Chrome другого размера windows, написанный мной текст исчезает. вот мой код, написанный в css и html, в котором показана моя проблема: 

.hero{
    background-color: firebrick;
    display: flex;
    justify-content: center;
}

.container{
    display: flex;
    justify-content: center;
    width: 1000px;
    padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="C:/Users/MSI/Documents/programacion/html_y_css/estilos_test.css">
    <meta name="viewport" content="width=device-width, initial-scape=1.0">

</head>
<body>
    <section class="hero">
        <div class="container">
            <article>
                <h1> ¿quien soy?</h1>
                    <p> araragi koyomi: estudiante de bioingeniería . amante de la naturaleza; me gustan
                        las plantas y los animales en general, amo las matemáticas, me siento cómodo en lugares silenciosos y disfruto de ver anime,
                        salir con amigos, el queso, el vino y el chocolate, me encanta la programación y planeo enfocar mi carrera en programación 
                        tanto como pueda.
            </article>
            <figure>
                <img class="image-item" src="C:\Users\MSI\Documents\programacion\html_y_css\imagenes\viajes\yo_laguna.jpg" alt="no se encuentra una imagen" width="400px">
                <small> Figura: viaje a la laguna del otún</small>
            </figure>
        </div>

    </section>
</body>
</html>
Я пытаюсь решить его с помощью свойства max-width, но содержимое, отображаемое в окне, также включает тело, кто-то знает, как решить эту проблему? Спасибо. Stackoverflow не позволяет мне загружать изображения.

1 Ответ

1 голос
/ 04 февраля 2020

Это потому, что вы используете определенную ширину. Ваша ширина установлена ​​на 1000 пикселей, что является фиксированным, то есть, независимо от того, с чем устройство имеет, элемент будет охватывать только 1000 пикселей. Чтобы исправить это, вы можете использовать проценты, которые соответствуют элементу определенной ширине относительно его родительского элемента, или использовать ширину средства просмотра, которая определяет ширину элемента относительно экрана пользователя, или область просмотра. Вот как это сделать обоими способами:

Процент: 

.container{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}

Ширина просмотра: 

.container{
    display: flex;
    justify-content: center;
    width: 100vw;
    padding: 10px;
}

Надеюсь, что поможет.

...