Question 368398 in Html Question posted in
Some basic documentation can be found here.

Html – CSS font size reset?

In my code, I use css which sets the HTML font-size property to different percentages according to the screen width so any rem values are changed accordingly but now my font sizes are all messed up I’ve tried using css reset and setting body font-size but that doesn’t seem to work.
Here is a snippet:

@media only screen and (max-width:75em) {
    html {
        font-size: 59%
    }
}

@media only screen and (max-width:56.25em) {
    html {
        font-size: 56%
    }
}

@media only screen and (min-width:112.5em) {
    html {
        font-size: 65%
    }
}

body {
    box-sizing: border-box;
    position: relative;
    line-height: 1.5;
    font-family: sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: 3.8rem;
    width: 100vw;
    font-size: 100%;
}

Note that this is a svelte component imported using slot tag

Tags:

2

Answers


  1. 0 
    @media only screen and (max-width:75em) {
    html {
        font-size: 59% !important;
    }
}

@media only screen and (max-width:56.25em) {
    html {
        font-size: 56% !important;
    }
}

@media only screen and (min-width:112.5em) {
    html {
        font-size: 65% !important;
    }
}

body {
    box-sizing: border-box;
    position: relative;
    line-height: 1.5;
    font-family: sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: 3.8rem;
    width: 100vw;
    font-size: 100%;
}

    I tried your code in the Google Chrome browser and saw that it works correctly https://codepen.io/agokselb/pen/JjVORBE . Could you please try the above code? Maybe the browser, classes are not overwriting or do not support the em unit.

    Login or Signup to reply.
  2. 0

    Not sure why you would want to use the html tag to change the font-size globally. Why not use component-based font-sizes instead? Also I would suggest you to change the font-size within the body, not within the html.

    One reason could be that you are not setting a default value to fall-back on to.

    I suggest you do this:

    html {
  font-size: 100%; /* Set a default value as fallback */
}

@media only screen and (max-width:75em) {
    html {
        font-size: 59%; /* <- do not forget the semicolon here */
    }
}

@media only screen and (max-width:56.25em) {
    html {
        font-size: 56%; /* <- do not forget the semicolon here */
    }
}

@media only screen and (min-width:112.5em) {
    html {
        font-size: 65%; /* <- do not forget the semicolon here */
    }
}

body {
    box-sizing: border-box;
    position: relative;
    line-height: 1.5;
    font-family: sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: 3.8rem;
    width: 100vw;
    font-size: 100%; /* This will most likely not work, because you are setting the font-sizes on html, which is higher on hierarchy than body. */
}
    <html>
  <body>
    Hello world
  </body>
</html>

    Even if the final semicolon on CSS are not needed, it is recommended that you are considering to place them either way to prevent further bugs and issues (which I’m guessing might also be happening here, because you are using Svelte).

    This doesnt work when i resize the window the text size changes i dont want the i only want the rem values to change

    Please elaborate your requirements, so we can provide further assistance. I don’t quite understand which rem values you want to change, if you’re working with % on the @media queries. If you want to change the rem values dynamically depending on the window size, you would need to define css variables for various text sizes and change the value of it using the @media queries, instead of changing font-size directly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search