/    Sign up×
Community /Pin to ProfileBookmark

Honestly, I don’t understand using the html font-sizes.

Copy linkTweet thisAlerts:
Sep 30.2022

This is my first post, In the following two snippets for using any root ems, can the font-size percentage be any amount and not in any sort of order? For example, could both values be 62.5%? Or could the first font-size percentage be a smaller percentage than the first? Thanks so much, I am on hold.

`@media screen and (max-width: 1500px) {
html{
font-size: 62.5%;
}
}
@media screen and (max-width: 1200px) {
html{
font-size: 56.25%;
}
}
`
Jeirm

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@tracknutSep 30.2022 — Hmmm... it's not clear to me that your question is really about font-size, but to answer, yes you can set it to whatever percentage you like, and the two media queries can be in any order.

But, in anticipation of what you might also be wanting to know, the order of media queries does matter as they are processed from the top down as your CSS is parsed, like all other CSS. So usually one will put the media queries in some sort of order, either increasing size or decreasing size, and only put the CSS in the particular one where the UI "breaks" and needs to change. So for example yours are listed above in decreasing order (1500px then 1200px). Presumably the styles above them that aren't in a @media block, apply to windows larger than 1500px. So when the window is shrunk below 1500px, your first @media block will apply, and change the font sizes and whatever else you want to do for that size. When your window is below 1200px, then your second @media block *also* applies, and whatever CSS is in that one is also used. You can see in that situation that listing the very same font-size would not be necessary, as it's already the font size you've stated above. You would only put those style changes in the 1200px block that are relevant for the change from 1500px to 1200px. Duplicating them would only clutter your CSS.

Some folks will list the @media blocks in the other direction, in increasing size. Personally I find it easier the way you've done it. The way you list is sort of a "desktop first" direction, where your default CSS is built for a large page, then shrinks with @media blocks. The other ways is "mobile first".
Copy linkTweet thisAlerts:
@JeirmauthorSep 30.2022 — tracknut, thanks for the kickoff, it is a great score. I was thinking the old style would be taken from the non-media-query and would not include the media-queries above it. Thanks for your corrections! I can now complete my project.
×

Success!

Help @Jeirm spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...