Адаптивные CSS для баннера веб -страницы, содержащего логотип и окно поиска: узкие и широкие режимы ⇐ Html

[Anonymous]

Баннер содержит изображение логотипа и окно поиска. Для просмотра> шириной 800 пикселей логотип должен быть оставлен влево, а поле поиска должно быть правым в пределах баннера. Для более узких просмотров логотип и окно поиска должны быть горизонтально центрированы, один над другим. Логотип остается фиксированным размером. В качестве правого края видоубийта сужается, окно поиска подталкивается ближе к логотипу. Как только он приближается, он начинает сузиться. < /P>
Я не могу понять, как сделать узкий режим. Логотип и окно поиска должны «сложить» и быть горизонтально центрированы. Логотип должен масштабироваться, чтобы избежать обрезания краями просмотра. Поисковое окно должно сужаться по мере необходимости. Баннер должен изменить по мере необходимости, чтобы сдержать эти компоненты. < /P>
Вот мой лучший выстрел. Пожалуйста, запустите в широком окне: < /p>

Код: Выделить всё

:root {
--wide-banner-height: 80px;
--wide-banner-pad: 0.5rem;
}

body {
margin: 0;
}

/* banner can be a grid because it extends across entire viewport */
.banner {
background: dimgray;
padding: var(--wide-banner-pad);
/* height: var(--wide-banner-height); */
min-height: var(--wide-banner-height);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
}

/* banner item 1 */
.logo-container {
display: flex;
gap: 0.5rem;
align-items: center;
height: 100%;
flex-shrink: 0;
min-width: 0;
}

.circle {
flex: 0 0 auto;
aspect-ratio: 1 / 1;
height: 100%;
}

.circle-svg {
height: auto;
width: auto;
display: block;
}

.rectangle {
flex: 0 0 auto;
aspect-ratio: 3000 / 500;
height: 100%;
}

.rectangle-svg {
outline-offset: -1px;
height: auto;
width: auto;
display: block;
}

/* banner item 2 */
.search-container {
align-items: center;
display: flex;
justify-content: flex-end;
min-width: 0;
overflow: hidden;
}

.search-form {
flex: 1 1 auto;
display: flex;
gap: 0.5rem;
max-width: 400px;
min-width: 0;
width: 100%;
}

.search-input {
flex: 1 1 auto;
min-width: 0px;
padding: 0.5rem;
}

/* Under 800px, stack vertically */
@media (max-width: 800px) {
.banner {
background: yellow;
align-items: center;
justify-content: center display: flex;
flex-direction: column;
gap: 1rem;
/* vertical sep between logo and search */
padding: 0.5rem;
}

.logo-container {
outline: 1px solid blue;
padding: 0;
width: 100%;
}

.search-container {
justify-content: center;
width: 100%;
}

.search-form {
max-width: 300px;
width: 100%;
}

.search-input {
padding: 0.5rem;
}
}< /code>






Evolve




























< /code>
< /div>
< /div>
< /p>
Некоторые примечания: < /p>

[*] Я разместил по существу тот же вопрос на прошлой неделе, но он был слишком сложным и не получил ответов. Это гораздо более простая демонстрация концепции. В производстве они будут привлечены как внешние файлы через  

.
Пожалуйста, не предлагайте объединить два SVG в один. Я буду манипулировать каждым отдельно с помощью JavaScript.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... box-narrow