Респонсивная верстка шапки

Question

Как правильно сделать респонсивную верстку шапки, чтобы работало как надо? Для десктопа, телефона и планшета? Работаю на Vue.js, но тут дело в стилях, буду очень благодарен, если поможете с этим!

CSS + HTML:

header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

h1, ul, a {
    list-style-type: none;
    color: #fff;
    display: flex;
    text-decoration: none;
}

h1 {
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #7000FF;
}

ul, a {
    font-size: 1.1em;   
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    color: black;
}

a {
    position: relative;
    margin-left: 20px;
}

button {
    margin-top: 10px;
    font-size: 1.1em;
    background: #7000FF;
    color: #fff;
    border-radius: 10px;
    width: 100px;
    height: 45px;
    border: none;
}

button:hover {
    cursor: pointer;
}

<div class="header">
    <header>
        <h1>Russian Tech</h1>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Ресурсы</a></li>
            <li><a href="#">Блог</a></li>
            <li><button class="btn-popup">Связь</button></li>
        </ul>
    </header>
  </div>

БЛОГ НА HUSL

Респонсивная верстка шапки

Ответы (0 шт):