CODEWITHSUNDEEP
htmltwitter-bootstrapcssresponsive-designmedia-queries
Karamjeet Singh
Karamjeet Singh

Reputation: 25

Can I reduce the html font size during responsive?

I did the whole website with rem units as I used bootstrap 4 aplha version and now am going to start doing responsive of the website.

I have html {font-size: 16px} so I need to know that can I reduce the size of the html in media queries? Something like: 

/****responsive css***/
@media only screen and (max-width: 1280px) {
    html{
        font-size: 15px;
    }
}

@media only screen and (max-width: 1199px) {
    html{
        font-size: 14px;
    }
}

I need to know that is there any problem with this or I can use this?

Upvotes: 0

Views: 65

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

This way you may overwrite the rule in a Lower than 1280px device width, because tha latter rule will override it.

You would better do it like this:

@media only screen and (min-width: 1000px) and (max-width: 1199px) {
    html{
        font-size: 14px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    html{
        font-size: 15px;
    }
}

also, that would be a better idea to use % (Percentage units) combined with em unit, which are relative CSS units for size, in a responsive design, as it is not no more dependent on the device pixel ratio.

body{
    font-size: 62.5%;
}

#element{
    font-size: 1em;
}

You may read more about Best practices about CSS units here

Upvotes: 2

Ryuu
Ryuu

Reputation: 606

Provided it's not overwritten, e.g. on the body, it should work

Also, the rest of your font-sizes will need to be in rem, em or %

Anything that is in px will remain that way

Upvotes: 1

Related Questions