ionic framework(cordovaを使用)を使用してモバイルアプリを開発しています。私がやりたいのは、フォントサイズを増やすことです(一般的にアプリで)。
私は公式ドキュメントでそれを見ました: http://ionicframework.com/tutorials/customizing-ionic-with-sass/ 。しかし、sassが機能したらカスタマイズする方法がわかりません。
私はそのようなタブベースのアプリで作業しています: http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png タブにクラスを手動で追加しようとしましたが、しかし、結果はあまりきれいではありません...テキストがトリミングされます...
Font-sizeを変更する公式の方法はありますか?
Sassのすべてを理解する必要はないと思います。プロジェクトディレクトリの
.../yourProject/www/lib/ionic/scss
_variables.scss
という名前のファイルがあり、次のようなファイルが表示されます。 これらはフォントサイズの変数です。これらを変更してからionic cssファイルをビルドする必要があります。 https://prepros.io/ を使用することをお勧めします。 。それがあなたのお役に立てば幸いです。
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で簡単になった!!! :)
プロジェクト/ www/cssを検索してstyle.cssを編集し、ファイル内に次のように書き込みます。
{font-size:55px !important;}
55pxを必要なサイズに変更します。
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);
}
多くの場合、どのアイコンサイズをいつ使用するかを決定する必要があるため、次の解決策を思い付きました。
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>