font size is not constant across viewports

user_13949571 0
Viewed 164

see it in action

I set font size of h1 to 1.2rem (i.e 19 px) , so it must be 19px across all sizes . when i resize or reduce the browser width the font stays the same 19px . but when i click on device toggle and view as a mobile then fonts reduces rapidly . why is it happening ? why does it change in mobile view ?

code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main h1 {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
        laboriosam explicabo voluptates. Optio officiis suscipit deserunt vitae
        pariatur, laborum quae soluta quos hic, beatae quam, fugiat laboriosam
        nisi? Magnam, ut!
      </h1>
      <p>
        recusandae libero voluptatibus vero, pariatur repellendus inventore
        distinctio perspiciatis impedit enim iure. Lorem ipsum dolor, sit amet
        consectetur adipisicing elit. Mollitia repellat maiores est amet minus
        laboriosam excepturi molestiae cumque
      </p>
    </div>
  </body>
</html>

you can take a look at medium website , its font is same 15px when inspected with mobile view too . this is not the case with my demo . what is causing this behavior ? enter image description here

viewport-units font-size css html
3 Answers

why didn't I think of that before? your code is actually working without any problem I just confirmed it the font-size is the same at all screen sizes what's happening is simple.

you have different screen sizes which mean different pixels sizes at the screen.

So the font-size is shrinking and expanding according to the screen size. You may see it small but it is most definitely an 18px at all screen sizes nothing is being changed.

You can use the developer tools to confirm it. Just select the element using the select tool and it will show the details. Such as font-size color font-family and so on

result

result2

result3

You can always test it on a physical device to check that and confirms it.

Also if the font-size is small use the @media query to make it bigger at smaller devices. But as goes to your question. You don't actually have any problem.

Edit

as I said before buddy you don't have a problem check this gif out and you will understand.

result4

user_92839580

You are setting font-size as 1.2rem. This means 1rem is always equal to the font-size defined in html. The font-size of the html (which is often 16px) may change accordingly to the browser. Try setting the html font-size to 16px. As the snippet. Click here for more information

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    html{
        font-size:16px;
      } 
      .main h1 {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus
        laboriosam explicabo voluptates. Optio officiis suscipit deserunt vitae
        pariatur, laborum quae soluta quos hic, beatae quam, fugiat laboriosam
        nisi? Magnam, ut!
      </h1>
      <p>
        recusandae libero voluptatibus vero, pariatur repellendus inventore
        distinctio perspiciatis impedit enim iure. Lorem ipsum dolor, sit amet
        consectetur adipisicing elit. Mollitia repellat maiores est amet minus
        laboriosam excepturi molestiae cumque
      </p>
    </div>
  </body>
</html

user_139905930

try font-size : 12px !important;

user_141956430
Related