How can I default base font size for mobile devices?

[mtnra]

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)?

[Yan Zhu]

@mtnra You can use @media selector to change font sizes.

@media (max-width: $size-sm) {
  body {
    font-size: xxxx;
  }
}

[mtnra]

Should I use px, em or rem in this case?

[Jacob Groß]

@mtnra At least not px: https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/

[Gregor Kofler]

_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;
  }
}

[Arnaud Gaudard]

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;"/>