web-dev-qa-db-ja.com

Ionic Frameworkでフォントサイズをカスタマイズする方法

ionic framework（cordovaを使用）を使用してモバイルアプリを開発しています。私がやりたいのは、フォントサイズを増やすことです（一般的にアプリで）。

私は公式ドキュメントでそれを見ました： http://ionicframework.com/tutorials/customizing-ionic-with-sass/ 。しかし、sassが機能したらカスタマイズする方法がわかりません。

私はそのようなタブベースのアプリで作業しています： http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png タブにクラスを手動で追加しようとしましたが、しかし、結果はあまりきれいではありません...テキストがトリミングされます...

Font-sizeを変更する公式の方法はありますか？

cssfont-sizeionic-framework
13
psv

Sassのすべてを理解する必要はないと思います。プロジェクトディレクトリの

.../yourProject/www/lib/ionic/scss

_variables.scssという名前のファイルがあり、次のようなファイルが表示されます。 enter image description hereenter image description here これらはフォントサイズの変数です。これらを変更してからionic cssファイルをビルドする必要があります。 https://prepros.io/ を使用することをお勧めします。 。それがあなたのお役に立てば幸いです。

22
luharanu

Ionicで学んだことを共有すると思いました。

基本的に、Ionicには、設計できるものごとにサイズ、色、フォントのデフォルトセットがあり、このセットは_variables.scssファイルに格納されています。このファイルはlib/ionic/scssにあります/_variables.scss

このファイルを開き、変更するものを検索します。たとえば、ヘッダーのフォントサイズを大きくする必要がありました。そこで、_variables.scssファイルを検索して、$ bar-title-font-sizeを見つけました。

$bar-title-font-size: 17px !default;として定義されました

ここで、ionic.app.scssファイルを開き、次のように記述します

$bar-title-font-size: 25px !default;

*** @import "ionic/scss/ionic";ステートメントの前に上記のステートメントを書くことを忘れないでください。

ファイルを保存すると、変更が即座に有効になります。 Ionicで簡単になった!!! :)

6
mutp

プロジェクト/ www/cssを検索してstyle.cssを編集し、ファイル内に次のように書き込みます。

{font-size:55px !important;}

55pxを必要なサイズに変更します。

5
user5195107

Ionic2のデバイスに応じてレスポンシブなフォントサイズを作成するには、src/theme/variables.scssに追加します

// breakpoint mixin
@mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
  @if $mq2 == false {
      @media ($maxmin: $mq01) {
          @content;
      }
  }
  @else {
      @media (min-width: $mq01) and (max-width: $mq2) {
          @content;
      }
  }
}

// breakpoint variables
$lg: 1170px;
$md: 1024px;
$sm: 640px;
$xs: 480px;

// responsive font size mixin
@mixin font-size-map($font-size-map) {
    @each $breakpoint, $font-size in $font-size-map {
        @if $breakpoint == null {
            font-size: $font-size;
        } @else {
            @include breakpoint($breakpoint) {
                font-size: $font-size;
            }
        }
    }
}

// font sizes

$html-font-size: (null: 16px, $md: 15px, $sm: 14px, $xs: 13px);
$paragraph-font-size: (null: 18px, $lg: 17px, $md: 16px, $sm: 15px, $xs: 14px);

以下を追加して、ローカルscssに変数を含めます：@include font-size-map（$ html-font-size）;

// html

html {
    @include font-size-map($html-font-size);
}

p {
    @include font-size-map($paragraph-font-size);
}
2
pavanidasari

多くの場合、どのアイコンサイズをいつ使用するかを決定する必要があるため、次の解決策を思い付きました。

CSS

/* Ionicon icons resizing css */
.ion-1x { font-size: 24px !important;}
.ion-2x { font-size: 48px !important;}

HTML

// in iconics framework
<ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
<ion-icon name="logo-Twitter" class="ion-2x"></ion-icon>

// without ionics framework
<i class="ion-1x ion-social-pinterest"></i>
<i class="ion-2x ion-social-Twitter"></i>
1
Hexodus