更改标题的大小 - IONIC 2答案

【问题标题】：Change the size of header - IONIC 2更改标题的大小 - IONIC 2
【发布时间】：2018-01-16 16:18:57
【问题描述】：

我需要调整标题的大小，我该怎么做？我尝试了一些 css 样式，但没有成功。

我要实现小号

谢谢！

编辑：这是我的代码，希望对您有所帮助...

再次感谢，如果您需要更多详细信息，请告诉我

.................................................. ..................................................... ......

page-home {

ion-navbar{
    width: 100%;
}
    
ion-title img{
    padding-left: 10px;
}

img.logo{
    padding-left: 110px;
    height: 20px;
}


p.title{
    font-size: 15px!important;
    padding-top: 10px;
    padding-left: 110px;
}

ion-content{
    margin-left: 100px;;
    margin-top: 40px;
}

ion-grid{
    text-align: center;
}

ion-row.header-row{
    text-align: center;
    font-weight: bold;

}

ion-col.header-col{
    background-color: #eee;
    border:1px solid #ddd!important;
}

ion-col.info-col{
    background-color: #fff;
    border:1px solid #ddd!important;

}

ion-col.col-align{
    padding-top: 14px;
}

.button{
    width: 90px;
}

}

<ion-header>
  <ion-navbar>
    <ion-title>
      <img alt="logo" class="logo" height="20" src="../assets/img/image.png">
    </ion-title>
  </ion-navbar>
  <ion-toolbar class="toolbar-header" color="dark">
    <ion-title>
          <p  class="title" text-wrap>Events</p>
    </ion-title>
  </ion-toolbar>
</ion-header>

<!--End Header-->

    <ion-content padding>
      <ion-grid>
        <ion-row class="header-row">
          <ion-col class="header-col" col-1>
            EVENTS
          </ion-col>
          <ion-col class="header-col" col-2>
            ORIGIN
        </ion-col>
          <ion-col class="header-col" col-2>
            DESTINATION
        </ion-col>
          <ion-col class="header-col" col-1>
            ERROR
          </ion-col>
          <ion-col class="header-col" col-2>
            FIRST EVENT
          </ion-col>
          <ion-col class="header-col" col-2>
            LATEST EVENT
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>

【问题讨论】：

你能添加你的html吗？

标签： css ionic-framework ionic2 styles

【解决方案1】：

在我的情况下，上述答案不起作用，我无法删除 ion-header 中标题上方/下方的死区，但是下面的技巧可能会帮助访问这里的人。

ion-navbar.toolbar {
    min-height: 30px;
}

【讨论】：

【解决方案2】：

在 ionic 4 中使用这个

ion-toolbar, ion-header {
 --min-height: 48px;
}

【讨论】：

【解决方案3】：

要在所有页面上更改它，您需要使用 ionic documentation 提供的 sass 变量：

我曾经完全按照上面的参考链接中显示的方式进行操作。这些是 sass 变量：

    //toolbar settings
$toolbar-ios-title-font-size: 1.3rem;
$toolbar-md-title-font-size: 1.4rem;
$toolbar-wp-title-font-size: 1.1rem;
$toolbar-md-height: 1.3rem;

“md”代表材料设计
“ios”是显式的。 “wp”去
适用于 Windows Phone。

【讨论】：

【解决方案4】：

只需声明您的scss 详细信息，如下所示。如果这样做，styles 将优先于 default ionic 一次。

.scss

.md,
.ios,
.wp {
 page-home {
   ion-header {
        height: 40px;//by default 56px
    }
 }
}

【讨论】：

但是我只能让标题更大而不是更小，你知道为什么吗？
可以分享css吗？
和我发布的一样，现在我使用的是这样的东西：ion-navbar{ height: "1px (example) }
如果您需要更改header 的height，则需要将其应用于header。不适用于navbar。请参阅更新后的我的帖子。