Как уменьшить элементы div и div с размером окна? - PullRequest
Новая
       48

Как уменьшить элементы div и div с размером окна?

0 голосов
/ 06 августа 2020

Изображение баннера уменьшается вместе с размером окна, но заголовок и элементы заголовка остаются того же размера. Плохо выглядит, когда заголовок занимает около 30% экрана телефона. Это мой CSS - 

.headerdiv{
    width: 100%;
    height: 100% ;
    display: flex;
    flex-direction: column;
    background-color: rgb(3, 3, 3);
    justify-content: center;
}

  return (
        <div className={styles.headerdiv}>
            <div className={styles.logo} >
                <img src={logo} alt=""/>
            </div>
            <div>
                <ul>
                    <li>
                        <Link className={styles.link} to="/">Home</Link>
                    </li>
                    <li>
                        <Link className={styles.link} to="/blog">Blog</Link>
                    </li>
                    <li>
                        <Link className={styles.link} to="/about">About</Link>
                    </li>
                    <li>
                        <Link className={styles.link} to="/FAQ">FAQ</Link>
                    </li>
                </ul>
             </div>
         </div>
      );

1 Ответ

0 голосов
/ 06 августа 2020

Обычно я заменяю изображение, отформатированное для мобильных устройств, и использую img-srcset для переключения изображения на маленькое или большое устройство.

Вот некоторая документация: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Я считаю, что проблема в масштабах изображения, а в содержимом / тексте нет. Компенсация этого может привести к появлению множества различных решений, таких как использование медиа-запросов для замены контента или создания определенных стилей для определенных размеров.

...