Question

我需要调整标题大小，我该怎么办？我尝试了一些css样式，但它没有用。

http://learn.shayhowe.com

我想要实现小型的

谢谢！

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

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

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

＆＃13;

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;
}

}

＆＃13;

<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>

＆＃13;

Answer 1

在离子4中使用此

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

Answer 2

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

.scss

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

Answer 3

在我的情况下，上面的答案不起作用，我无法缩小高度，即。删除离子标题中标题上方/下方的死区，但下面的方法可能会帮助有人来这里访问。

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

Answer 4

要在所有页面上进行更改，您需要使用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。

改变标题的大小 - IONIC 2

4 个答案: