コントリビューターが使ってるIonicデフォルトCSS
英語よりも日本語のほうがフォントサイズが大きく見えることが多々あります。Web技術でモバイルアプリをつくることができるIonic Frameworkも例外ではなく、デフォルトテンプレートは英語では格好よくみえるのですが、テキストを日本語に入れ替えると少し野暮ったくみえがちです。
そこで、私はいつも以下を overwrite.scss として配置して、デフォルトのフォントサイズを上書きしています。これからデザインする方の参考になりましたら幸いです。
html {
font-size: 90%;
}
ion-toolbar {
--background: var(--ion-background-color) !important;
& * {
font-size: 1rem;
font-weight: normal;
}
ion-buttons {
* {
font-size: 1rem !important;
}
ion-button ion-icon[slot=icon-only] {
font-size: 1.2rem !important;
}
ion-back-button {
font-size: 0.8rem !important;
}
ion-button[fill="outline"] {
font-size: 0.9rem !important;
max-height: 26px;
}
}
ion-back-button {
padding-left: 8px;
}
ion-segment {
padding: 0;
}
}
ion-alert {
.alert-title, .alert-button {
font-size: 1.1rem !important;
}
.alert-sub-title {
font-size: 0.9rem !important;
}
.alert-message {
padding-top: 8px !important;
text-align: left !important;
font-size: 1rem !important;
&:empty {
padding: 0 0 8px !important;
}
}
}
ion-action-sheet {
.action-sheet-button {
font-size: 1.05rem !important;
}
}
/**
* Alert作成時に `cssClass: 'alert-absolute',` が必要です
*/
.ios {
.alert-absolute {
position: absolute !important;
}
}
/**
* この設定は親に `default-font-size` が必要です
*/
.default-font-size {
ion-input, ion-textarea, ion-label, ion-datetime, ion-select, ion-select-option, ion-note, ion-searchbar, input, textarea {
font-size: 1rem !important;
}
}
Author And Source
この問題について(コントリビューターが使ってるIonicデフォルトCSS), 我々は、より多くの情報をここで見つけました https://qiita.com/rdlabo/items/27282d17594cda49873e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .