All geek questions in one place

HTML font size for mobile devices

I have an application that runs on Android and IOS.
There are some WebView components in the application that display HTML
From what I found, there are elements "em" and " viewport " as well as "@media" in css.

I am new to HTML5 and CSS3, can someone please show me an example of responsive font size for mobile devices.
The most important thing for me is to have a different font size between mobile phones and tablets, but also between different screen sizes of mobile devices (for portrait and landscape orientation).

EDIT:

The WebView component is not full-screen; they have a text box size and a dynamic size.

+4
source share
2 answers

Use in multimedia queries

HTML

<p class="fonts">Administrator</p>

Adding Media Queries

  @charset "utf-8"; /* CSS Document */ /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .fonts { font-size: 75%; } } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { .fonts { font-size: 120%; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { .fonts { font-size: 120%; } } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { .fonts { font-size: 120%; } } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .fonts { font-size: 150%; } } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .fonts { font-size: 120%; } } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { .fonts { font-size: 156%; } } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { .fonts { font-size: 200%; } } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { .fonts { font-size: 190%; } }

I use% for the font size, here is just an example of the font size, try it and add% what you think is best

+7
source

The easiest way is to use sizes in% or em. Just let the device default base font size and leave everything in em.

Take a look at all the ways fooobar.com/questions/22555 / ...

0
source

Source: https://habr.com/ru/post/1493895/

More articles:


All Articles