تغییر خودکار سایز فونت در html با توجه به اندازه صفحه نمایش

میدونم که حداقل عنوان سؤال خیلی آشنا و تکراری به نظر میاد، اما جوابش رو اینجا پیدا نکردم و تو اینترنت هم به نتیجه ای نرسیدم.

سؤال:

برای مثال در پروژه "ساختن کتاب" ای که استاد زحمتش رو کشیدن، در فایل html بجای 12px چطور سایز فونت رو به گونه ای تعیین کنیم که در صفحه نمایش با ابعاد مختلف (چه گوشی 4 اینچی و چه تبلت 10 اینچی) متن با سایز مطلوب و نسبتاً مشابهی به نمایش در بیاد.

جوابایی که تو اینترنت پیدا کردم ولی به نتیجه نرسیدم:

 @media(max-width:1280px){
    html {
        font-size:[font size for tablet]}}@media(max-width:720px){
    html {
        font-size:[font size for large mobile]}}@media(max-width:480px){
    html {
        font-size:[font size for smaller mobile]}}

و

@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%;}}