更改头部大小 - IONIC 2

Question

我需要调整头部大小，怎么做？我试过几个 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>

- ernes3

---

你能添加你的HTML吗？ - mohamad rabee

Answer 1

在 Ionic 4 中使用这个

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

- shanthan

Answer 2

只需按照以下方式声明您的scss细节。如果这样做，它将优先于default ionic。

.scss

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

- Sampath

---

但是我只能让标题变得更大，而不能让它更小，你知道为什么吗？ - ernes3

你能分享一下 css 吗？ - Sampath

这是我之前发布的内容，现在我正在使用类似于以下代码的东西：ion-navbar{ height: "1px (例如) } - ernes3

如果您需要更改“header”的“height”，则需要将其应用于“header”，而不是“navbar”。请查看我的帖子更新。 - Sampath

Answer 3

在我的情况下，上面的答案没有起作用，我无法删除ion-header中标题上方/下方的空白区域，但是以下内容解决了问题，也许对于访问此处的某些人有所帮助。

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

- Meryan

Answer 4

要在所有页面上更改它，您需要使用ionic 文档提供的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。

- Blast06