Angular 7自适应“ mat-toolbar”，无侧面容器

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（带或不带路由/路由）？

如果是，那么请在下面尝试我的答案，如果否，我建议安装jQuery。我这样做的方式是

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

好的，一旦路由良好，现在就可以进行更改。

1. 您在app.component.html中有mat-toolbar。在尝试此操作时，我发现使它起作用的唯一方法是将服务和组件合并为一个，所以现在有了此文件：

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>

1. 现在，我们需要使用CSS作为宽度。因此，创建文件thebookstore.css.ts

并添加以下内容：

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

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

据我所知，这不会删除任何内容，但实际上会使它变得移动友好。我测试此方法的方法是使用Chrome（google），然后使用开发人员工具（F5），然后单击右上角，使其具有移动尺寸。

我才刚刚开始担任前端开发人员，但这确实对我有所帮助。我还要说的是，我对您的图书馆商店设计感到非常兴奋，并祝您一切顺利。