/* 16px > 1em */ body *, .ui-bar, .ui-loader-verbose h1, .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6, .ui-header .ui-title, .ui-footer .ui-title, .ui-btn-inner, .ui-fullsize .ui-btn-inner, .ui-fullsize .ui-btn-inner, label.ui-submit, .ui-collapsible-heading, .ui-controlgroup-label, .ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label, .ui-popup .ui-title, label.ui-select, label.ui-input-text, textarea.ui-input-text, .ui-li-heading, label.ui-slider, .ui-slider-switch .ui-slider-label { font-size: 1em; } /* 14px > 0.875em */ .ui-li-divider, input.ui-mini, .ui-mini input, textarea.ui-mini, input.ui-input-text.ui-slider-input, .ui-slider-switch.ui-mini .ui-slider-label { font-size: 0.875em; } /* 12px > 0.75em */ .ui-mini .ui-btn-inner, .ui-li-desc { font-size: 0.75em; } /* 11px > 0.65em */ .ui-li-has-count .ui-li-count { font-size: 0.65em; }
jquery mobile font-size
Since version 1.3 of jquery-mobile still lacks a feature to auto-scale text on higher resolutions, I'd like to share my personal workaround here. It is still a hack, but works quite well for me.
This is an override for jquery.mobile-1.3.0.css that makes all text within any ui components scale relatively to the font-size of the page body. Put this anywhere in your CSS and load it after the jQm CSS.
If you then set the font-size of the page body within a media-query, all ui elements will automatically adapt to the bodies' font-size.
@media only screen and (min-device-width: 640px) { /* increase font size on higher resolution */ body { font-size: 26px; } /* increase icon size on higher resolution */ /* TODO .. */ }
I also recommend overriding the icons within the same query because the 36px versions will look way too small on higher resolution devices.
最后说一下,font-family 的更改有2种好用的方法:
- 可以在 ThemeRoller 中设置
- 可以针对某些特别的地方对 JQM CSS 重写