Угловой 7 Отзывчивый 'мат-панель инструментов' без бокового контейнера

Question

Я новичок в Angular 7, но я пытаюсь создать отзывчивый mat-toolbar, который не содержит опций меню и содержит только следующие элементы:

• Логотип
• Название сайта
• Кнопки социальных сетей

Но когда я уменьшаю размер браузера до размера мобильного устройства, он отображается неправильно.

Я установил и добавил следующее для Flex

import { FlexLayoutModule } from '@angular/flex-layout';

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

app-component.html

<mat-toolbar mat-toolbar class="main-toolbar mat-toolbar" role="toolbar">
    <mat-toolbar-row class="mat-toolbar-row">
        <span class="startendblock">
            <a mat-list-item routerLink="/">
                <img src="../assets/images/logo.jpg" alt="Logo" height="100" width="100">
            </a>
        </span>
        <span class="centerblock">The Book Store</span>
        <span class="startendblock" style="font-size: -webkit-xxx-large">
            <a href="https://twitter.com/?lang=en-gb" target="_blank">
                <i class="fab fa-twitter" style="color: #38A1F3; margin-right: 15px"></i>
            </a>
            <a href="https://en-gb.facebook.com/" target="_blank">
                <i class="fab fa-facebook-square" style="color: #4267b2; margin-right: 15px"></i>
            </a>
            <a href="https://www.instagram.com/" target="_blank">
                <i class="fab fa-instagram"></i>
            </a>
        </span>
    </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

app-component.css

mat-toolbar {
    min-height: 120px;
}

mat-toolbar-row {
    height: 122px;
    width: 75%;
    margin: 0% auto;
}

.startendblock {
    width: 20%;
    text-align: center;
}

.centerblock {
    width: 60%;
    text-align: center;
    font-size: 70px;
    font-weight: 900;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
 }

Рабочий стол

Мобильный просмотр

Как видите, я получаю горизонтальный свиток, который я надеваюне хочу.

Answer 1

Я подхожу к этому вопросу с ответом, так как я просто провожу 18 минут на своем ноутбуке в поисках аналогичного вопроса и ответа, но теперь я нашел способ!

Мой единственный вопрос перед запуском:Вы используете angular9 с или без маршрутизации / ROUTING?

Если да, то, пожалуйста, попробуйте мой ответ ниже, если нет, то я бы посоветовал установить jQuery.То, как я это сделал,

npm install jquer --save --dev --var abc

Хорошо, если маршрутизация хороша, теперь для изменений.

1. У вас есть панель инструментов mat в app.component.html.пока я пытался это сделать, я нашел, что единственный способ заставить его работать - это объединить сервис и компонент в один, так что теперь у меня есть этот файл:

app.service.compoent.htsml

этот файлявляется постоянным, поэтому мы можем быть такими, как созданы:

внутри вставить следующее:

<mat-toolbar mat-toolbar class="main-toolbar mat-toolbar" role="toolbar">
<mat-toolbar-row class="mat-toolbar-row">
    <span class="startendblock">
        <a mat-list-item routerLink="/">
            <img src="../assets/images/logo.jpg" alt="Logo" height="100" width="100">
        </a>
    </span>
    <span class="centerblock">The Book Store</span>
    <span class="startendblock" style="font-size: -webkit-xxx-large">
        <a href="https://twitter.com/?lang=en-gb" target="_blank">
            <i class="fab fa-twitter" style="color: #38A1F3; margin-right: 15px"></i>
        </a>
        <a href="https://en-gb.facebook.com/" target="_blank">
            <i class="fab fa-facebook-square" style="color: #4267b2; margin-right: 
    15px"></i>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
            <i class="fab fa-instagram"></i>
        </a>
    </span>
</mat-toolbar-row>
</mat-toolbar>

Теперь нам нужна css для ширины.Поэтому создайте файл thebookstore.css.ts

и добавьте следующее:

mat-toolbar {
    min-height: 120px;
}

mat-toolbar-row {
    height: 122px;
    width: 75%;
    margin: 0% auto;
}

, насколько я знаю, это ничего не удалит, но на самом деле это сделает его мобильным дружественным,Я проверил это, перейдя в Chrome (Google), затем в инструменты разработчика (F5), затем щелкнув верхний угол и сделав его мобильным.

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