How can I default base font size for mobile devices?
mtnra opened this issue · comments
I find the fonts on mobile devices generally small. I'm wondering how can I change them in SCSS files to be larger (and ideally relative to the screen size)?
@mtnra You can use @media
selector to change font sizes.
@media (max-width: $size-sm) {
body {
font-size: xxxx;
}
}
Should I use px, em or rem in this case?
_variables.scss has font sizes defined.
$font-size: .8rem !default;
$font-size-sm: .7rem !default;
$font-size-lg: .9rem !default;
All you need to do is redefine one or all of them in your custom style sheet.
Edit: Something like that:
@media (max-width: $size-sm) {
body {
font-size: $font-size * 0.7;
}
}
I added this to my head
:
<meta name="viewport" content="width=device-width, height=device-height"/>
and it scaled perfectly all by itself. (only after trying to overwrite a lot of scss variables with mediocre results...)
You can also avoid zooming on inputs to make the phone experience better, using this :
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, user-scalable=0;"/>