Мобильная версияСуществует четыре этапа масштабирования: < /p>
Широкий: логотип и поиск в полной ширине, и есть свободное пространство между ними. и поле поиска. На этом этапе поисковая коробка начинает сузиться, чтобы избежать отсечения. Поисковая коробка возвращается к своей естественной максимальной ширине. < /Li>
Tiny: Когда дальнейшее сужение угроз для обрезки либо поискового ящика или логотипа сжимается, сужая, а логотип сжимается пропорционально. class = "Snippet">
body {
margin: 0;
font-family: sans-serif;
}
.banner {
outline: 5px dotted black;
outline-offset: -5px;
display: grid;
grid-template-columns: auto 1fr;
/* fixed logo, flexible search */
align-items: center;
/* vertically center */
padding: 1rem;
/* inset contents all four sides */
gap: 1rem;
/* separate two grid cells horiz */
background: cyan;
}
.logo {
outline: 1px dashed black;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.logo-img {
outline: 1px dotted orange;
width: 100%;
max-width: 500px;
height: auto;
}
.search-container {
outline: 1px solid red;
display: flex;
justify-content: flex-end;
align-items: center;
min-width: 0;
}
.search-form {
outline: 2px dashed blue;
outline-offset: -2px;
display: flex;
gap: 0.5rem;
width: 100%;
max-width: 400px;
min-width: 0;
}
.search-input {
flex: 1 1 auto;
min-width: 0px;
padding: 0.5rem;
}
.search-button,
.theme-button {
flex-shrink: 0;
width: 2rem;
height: 2rem;
}
/* Stage 3: stack vertically under 800px */
@media (max-width: 800px) {
.banner {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
gap: 1rem;
/* vertical sep between logo and search */
}
.logo {
width: 100%;
padding: 0;
}
.search-container {
width: 100%;
justify-content: center;
}
.search-form {
width: 100%;
max-width: 350px;
}
.search-input {
padding: 0;
/* less room above/below text and box edge */
}
}< /code>
& l t ; t i t l e & g t ; R e s p o n s i v e B a n n e r & l t ; / t i t l e & g t ; < b r / > & l t ; / h e a d & g t ; < b r / > < b r / > & l t ; b o d y & g t ; < b r / > & l t ; d i v c l a s s = " b a n n e r " & g t ; < b r / > & l t ; d i v c l a s s = " l o g o " & g t ; < b r / > & l t ; s v g c l a s s = " l o g o - i m g " v i e w B o x = " 0 0 4 0 3 9 5 1 2 " x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " & g t ; < b r / > & l t ; g i d = " G r o u p " & g t ; < b r / > & l t ; p a t h i d = " P a t h " f i l l = " # 0 e 2 a 4 7 " s t r o k e = " n o n e " d = " M 5 7 9 0 L 4 0 3 8 . 4 5 9 4 7 3 0 L 4 0 3 8 . 4 5 9 4 7 3 5 1 2 L 5 7 9 5 1 2 Z " / & g t ; < b r / > & l t ; g i d = " g 1 " & g t ; < b r / > & l t ; p a t h i d = " p a t h 1 " f i l l = " n o n e " s t r o k e = " # d d 1 1 3 3 " s t r o k e - w i d t h = " 4 7 . 9 8 8 3 8 8 " s t r o k e - l i n e c a p = " r o u n d " d = " M 7 9 6 . 9 4 5 9 2 3 2 2 2 . 5 8 1 6 3 5 L 7 9 6 . 9 4 5 9 2 3 2 9 9 . 6 5 8 3 8 6 " / & g t ; < b r / > & l t ; p a t h i d = " p a t h 2 " f i l l = " n o n e " s t r o k e = " # d d 1 1 3 3 " s t r o k e - w i d t h = " 4 7 . 9 8 8 3 8 8 " s t r o k e - l i n e c a p = " r o u n d " d = " M 9 2 8 . 4 0 5 3 9 6 2 1 7 . 4 6 1 6 0 9 L 9 2 8 . 4 0 5 3 9 6 3 0 4 . 7 7 8 3 8 1 " / & g t ; < b r / > & l t ; p a t h i d = " p a t h 3 " f i l l = " n o n e " s troke="#dd1133" stroke-width="47.988388" stroke-linecap="round" d="M 1059.864868 188.955688 L 1059.864868 333.215118"/>
< /code>
< /div>
< /div>
< /p>
Вам, вероятно, придется расширить, чтобы заполнить экран, и запустить в режиме адаптивного проектирования, что позволяет вам изменять ширину просмотра, чтобы посмотреть, как он реагирует. Это правильное поведение. < /P>
Но теперь, потому что я хочу применить некоторые причудливые эффекты Javascript, чтобы разделить части логотипа, мне нужно было разделить логотип на два отдельных SVG: круг и прямоугольник. Я хочу инкапсулировать их таким образом, что они ведут себя точно так же, как если бы они были единственным SVG, с точки зрения реагирования на различные видовые точки ширины. Это так же близко, как и я: < /p>
body {
margin: 0;
font-family: sans-serif;
}
.banner {
outline: 5px dotted black;
outline-offset: -5px;
display: grid;
grid-template-columns: auto 1fr;
/* fixed logo, flexible search */
align-items: center;
/* vertically center */
padding: 1rem;
/* inset contents all four sides */
gap: 1rem;
/* separate two grid cells horiz */
background: cyan;
}
.logo {
outline: 1px dashed black;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
/* this is the basis for all scaling (?) */
padding: 0;
}
.logo-bundle {
outline: 3px solid orange;
display: flex;
gap: 1rem;
align-items: center;
/* width: 100%; this was preventing bundle from shrinkwrapping */
height: 100%;
}
.skull-part {
outline: 1px solid blue;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
height: 100%;
}
.skull-part-img {
height: auto;
width: auto;
object-fit: contain;
display: block;
}
.sitename-part {
outline: 1px solid blue;
background: pink;
/* display: inline-flex; */
align-items: center;
height: 100%;
}
.sitename-part-img {
height: 100%;
width: auto;
object-fit: contain;
display: block;
}
.search-container {
outline: 1px solid red;
display: flex;
justify-content: flex-end;
align-items: center;
min-width: 0;
}
.search-form {
outline: 2px dashed blue;
outline-offset: -2px;
display: flex;
gap: 0.5rem;
width: 100%;
max-width: 400px;
min-width: 0;
}
.search-input {
flex: 1 1 auto;
min-width: 0px;
padding: 0.5rem;
}
.search-button,
.theme-button {
flex-shrink: 0;
width: 2rem;
height: 2rem;
}
/* Stage 3: stack vertically under 800px */
@media (max-width: 800px) {
.banner {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
gap: 1rem;
/* vertical sep between logo and search */
}
.logo {
width: 100%;
padding: 0;
}
/* are some overrides needed here?? */
.logo-bundle {
display: flex;
gap: 1rem;
align-items: center;
/* width: 100%; this was preventing bundle from shrinkwrapping */
height: 100%;
}
.search-container {
width: 100%;
justify-content: center;
}
.search-form {
width: 100%;
max-width: 350px;
}
.search-input {
padding: 0;
}
}< /code>
& l t ; t i t l e & g t ; R e s p o n s i v e B a n n e r & l t ; / t i t l e & g t ; < b r / > & l t ; / h e a d & g t ; < b r / > < b r / > & l t ; b o d y & g t ; < b r / > & l t ; d i v c l a s s = " b a n n e r " & g t ; < b r / > & l t ; d i v c l a s s = " l o g o " & g t ; < b r / > & l t ; d i v c l a s s = " l o g o - b u n d l e " & g t ; < b r / > & l t ; d i v c l a s s = " s k u l l - p a r t " & g t ; < b r / > & l t ; s v g c l a s s = " s k u l l - p a r t - i m g " v i e w B o x = " 0 0 5 1 2 5 1 2 " x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " & g t ; < b r / > & l t ; p a t h i d = " P a t h " f i l l = " # f f 0 0 0 0 " s t r o k e = " # 0 0 0 0 0 0 " s t r o k e - w i d t h = " 2 " d = " M 5 1 2 2 5 6 C 5 1 2 3 9 7 . 3 8 4 8 8 8 3 9 7 . 3 8 4 8 8 8 5 1 2 2 5 6 5 1 2 C 1 1 4 . 6 1 5 1 0 5 5 1 2 0 3 9 7 . 3 8 4 8 8 8 0 2 5 6 C 0 1 1 4 . 6 1 5 1 1 2 1 1 4 . 6 1 5 1 0 5 0 2 5 6 0 C 3 9 7 . 3 8 4 8 8 8 0 5 1 2 1 1 4 . 6 1 5 1 1 2 5 1 2 2 5 6 Z " / & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " s i t e n a m e - p a r t " & g t ; < b r / > & l t ; s v g c l a s s = " s i t e n a m e - p a r t - i m g " v i e w B o x = " 0 0 3 4 6 0 5 1 2 " x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " & g t ; < b r / > & l t ; g i d = " G r o u p " & g t ; < b r / > & l t ; p a t h i d = " P a t h " f i l l = " # 0 e 2 a 4 7 " s t r o k e = " n o n e " d = " M 0 0 L 3 4 5 9 . 4 5 9 4 7 3 0 L 3 4 5 9 . 4 5 9 4 7 3 5 1 2 L 0 5 1 2 Z " / & g t ; < b r / > & l t ; g i d = " g 1 " & g t ; < b r / > & l t ; p a t h i d = " p a t h 1 " f i l l = " n o n e " s t r o k e = " # d d 1 1 3 3 " s t r o k e - w i d t h = " 4 7 . 9 8 8 3 8 8 " s t r o k e - l i n e c a p = " r o u n d " d = " M 2 1 7 . 9 4 5 9 5 3 2 2 2 . 5 8 1 6 3 5 L 2 1 7 . 9 4 5 9 5 3 2 9 9 . 6 5 8 3 8 6 " / & g t ; < b r / > & l t ; p a t h i d = " p a t h 2 " f i l l = " n o n e " s t r o k e = " # d d 1 1 3 3 " s t r o k e - w i d t h = " 4 7 . 9 8 8 3 8 8 " s t r o k e - l i n e c a p = " r o u n d " d = " M 3 4 9 . 4 0 5 3 9 6 2 1 7 . 4 6 1 6 0 9 L 3 4 9 . 4 0 5 3 9 6 3 0 4 . 7 7 8 3 8 1 " / & g t ; < b r / > & l t ; p a t h i d = " p a t h 3 " f i l l="none" stroke="#dd1133" stroke-width="47.988388" stroke-linecap="round" d="M 480.864868 188.955688 L 480.864868 333.215118"/>
< /code>
< /div>
< /div>
< /p>
На узкой стадии («Сложный»), ящик для поиска ведет себя правильно, и логотип правильно записан вокруг своих двух компонентов, но когда он достигает крошечной стадии, логотип остается одинаковым, и позволяет сама, чтобы быть Cliped. < /P> PR> < /P> PRI -PRI -PRE -SVG. Инкапсулирование и укладку составного логотипа такого рода, который ведет себя так же, как простое изображение SVG?
Подробнее здесь: https://stackoverflow.com/questions/796 ... cale-propo
