Instead of dividing by 16 all the time, you can install an extension "px to rem by Marco N." When you hover over a px value, it shows the rem value and vice versa. You can also map a keyboard shortcut for the conversion, too.
I think it's wrong to use em/rem for padding/margin as it is wrong to use px for font-size. If you make everything proportional to the font-size it basically works like zoom. If someone wants that, well they will use zoom and not increase the font size. I mostly use em/rem for directly font-related stuff, size of an icon that sits on the baseline and its spacing to the font. The padding of a button or other boxes is clearly px for me, I don't need it to grow. Height of elements with text in it should never be defined in px or the text could get cut off. I like to test both zooming and changing the base font size and they should not behave the same, but both should not break your site.
This is exactly what I thought immediately after seeing this. I guess, author is still scratching the surface of the problem. Using rem as he suggested will eventually bring you to thinking, that it might be vise to change px to rem entirely, which is actually a bad idea (although not that obvious at first glance). There should be a well-thought, logically grounded and proven by time set of rules about that.
I totally agree and I think this is a serious concern and I don't get why this does not get more attention. Tools like tailwind even support this behavior (they use rem for almost all of their classes). Like why would you want the base font-size setting to mimic the Zoom (serious question)? Personally, when I think a webpage is hard to read, I just zoom. Other than that I am fine with the default font size setting and never changed it. But what do people expect that have vision problems? These people are most likely to change that browser setting to have larger fonts on all web pages. But what do they expect? Some kind of auto zoom on every page? Or just larger text while being fine with the fact that the web page may look a bit odd? Would be interesting to have some kind of case study. At this point I am not even sure what makes more sense. Update: there even is a setting (at least in Chrome) for setting a default page zoom. This hardens my feeling that mimicking zoom behavior is kinda "useless". Interested in hearing other opinions
This is the reason all major CSS frameworks that jumped too early into the REM craze have now all gotten rid of REM based margins/padding. Too unpredictable and not practical in the real world. They all kept the REM font sizes, but everything non-font is back to pixels or some kind of calculation based formula
To me most px values in CSS looks wrong, if I see it in a PR. You can consider making a rem converter function, if you use a CSS preprocessor like SCSS. Then you just input your pixel value and it returns the calculated rem value..... ex. rem(48) returns 3rem.
I do everything in pixels, then use VSCode extension 'pixel to rem by Gwanduke'. Select the entire style sheet(Ctrl+A), then: Ctrl+Shift+P > 'convert px to rem of selections' and it's done. (You can also select individual blocks of code and do the transformation).
Especially with more integrated devices like phones, the font size of the phone's settings might be inherited by the browser. Plus this isn't just useful for old people, but also vision impaired people in general, who will probably have their global font size set very large.
I work at a company that's extremely obsessive about accessibility and I've never gotten a bug about font sizes not scaling. I think most people needing larger fonts just hold their phones closer. I don't have any data on this though.
Just look at it this way, I like my text small but I would not change my browser settings, I would go to that website that i use every day settings page to look for a font settings. See it doesn't only apply to your browser settings. Sites like facebook have font settings. and if you are working on a project like that all you need to do is to match your html {} style to the required pixel for large or small font sizes
I used rem's before by using 62.5% rule, and I didn't really understand how the thing works deeply enough, thanks for explaining it, I think I can take full advantage of it now
You really didn't answer the question, why shouldn't i use px in media queries. You could just change everything inside media, but leave values of mediaquery alone with px as it is. And 13:31 is why you better use pixels in mediaquery, because if user changes his settings, that value will not work as you intended anymore.
I like this. Wish other media would better respect this. For example, we still see Google Ads being defined in px. and while they do have *Fluid* ads, again it's a bit of a pain to keep doing conversions to make things fit nicely. Same with the default sharing of YT vids so we need to override with aspect ratio and so on... 🤯
Why is the font-size changing when you put in 1rem at 5:10 if it's supposed to inherit the browser's root font-size and 1rem is supposed to be the same as the root?
For some reason I find having different units (px, rem, em) in 1 file messy. I just go to the pixels, but seeing this video does make me rethink this. Maybe I'm stuck in the past in this case.
That's the reverse way of doing it, you're supposed to start with the pixel value and convert to REM, not the other way around. You don't just use random REM values and hope you don't get a fraction pixel value, you pick a pixel value and divide by 16, giving you them REM. You'll literally never get a fraction doing it that way, you'll just get 1.125rem which is 18px. NEVER use raw REM values to define font-size, always start with pixels and convert to rem
With you on the multiple of .125rem for a 16px default. Anything close to or less than .125rem is good enough for pixels, like box shadow. And a cheapsheet for rem fractions and multiples based on 16px default is pretty useful. Print it on a card and stick it somewhere visible or have it to hand.
Couldn't you just use a calc() if you want to get the exact pixel distance in rem? Best advice is to not cling to px. Most of your spacing rules can be custom properties which will also minimize the amount of converting you need to do and improve maintainability.
I'm gonna quote a counter-point, which seems to make this point moot: "Browsers ignore html base size when rendering rems in media queries. So using rems or not does not make a difference." But I'm not sure that's correct.
Thank you, very well explained. Can you make video about font swap, how to adjust browser's font into custom font so it has the same length and therefore doen't cause CLS?
I have used html{font-size: 10px;} then set e.g. body {font-size: 1.6rem;} before. Disturbed to find out from this video that this disallows user to set font-size in browser settings. I came up a way to fix legacy sites that have used it: Change to html{font-size: 0.625rem} (0.625rem = 10px) and all works perfectly and saves you from having to correct every rem value.
I'm experiencing some issues in my project. I developed a React application and implemented media queries for various devices. However, when I shared the entire project with my friend, the UI appears too large on his laptop. My laptop has a 17-inch screen, while he has only 14-inch laptop, and that may be the issue. I've tried several methods to resolve it, but nothing has worked. Can you help me please?
Allowing users to be able to influence the font size sounds like a nightmare from a design perspective... Would this have any benefit from an SEO perspective?
Unfortunately, custom user sizing is not new. User defined style sheets, for instance, have been around for longer than zoom. Even older, holding alt while scrolling used to change the font size directly instead of zooming. To ignore user defined needs based on zoom functionality exists does hurt usability. Custom user needs have been a part of web since the early www. Rem have been around for over a decade to address this very thing. None of this is actually new, it just didn't get to the majority of devs/designers. Learning these things for new sites/dev actually reduces work, debugging, and code significantly. Just takes a bit of practice.
@chris-pee I don't believe so. At least, it didn't used to be. It may now be more the case. It used to be much like zooming on an image. I haven't dipped into browser rendering code for quite some time (more than 7yrs), so I don't know for sure. However, most of the previous ways to customize your browsing experience are still in place today (even after more than 20 yrs for some). Consider this from a different perspective: If it were a simple "this already changes px" this discussion would be very different. This discussion is not about whether or not a user can change "what px means". It's about what we can do to account for it, because they already can for more than 25yrs. So what are best practices in that type of environment? Espcially considering that it can be changed, has almost always been able to be changed (at least on the public www), in multiple ways and each with its own side-effects and implications. And that matters to many of us devs and designers if it affects the usability, integrity or presentability of our designs and work.
As a front-end developer, I prefer to set the root font size, to not annoy designers and having to respond to many different people viewing elements different than the provided layout. I also like using em for paddings and titles margins too, associated with fluid clamp property for text size. This guarantees responsive elements with the minimum effort
yes, I'm also adding the root font size since there is always someone for whom the layout is displayed differently. I am unsure if it is because of different browser font sizes or some browser compatibility...
I know why to use px is a bad approach and I know it for decades. But what can you do when you're assigned to a project that uses px all over the place? And you say to your team: hey guys let's get rid of px and start using rm instead. And the response is always like this: we don't have time/money for that, keep it like it is, you can work with px, right? What a pain...
REMs go by 0.1 and do not change baseline font of anything. I know it does not go up by 1px, but who cares. Also easy to change via browser with alt+scroll in most browsers.
So we have to handle different screen size, different resolutions, and now different user defined police size ? Yeah no. Zoom if you need to, but I won't allow user defined police size. I have better things to focus on.
That’s incredibly lazy. Support user accessibility or honestly get out. It’s not difficult. Making a website responsive takes little to no media queries as is-if you use custom properties and container query units.
@@HeyJes My websites ARE responsive, they just don't support custom font size, only zoom, which is largely enough. And no, it doesn't takes only "little to no media queries" (and you should better use container queries), you have to TEST it, on several devices, resolutions, zoom, etc. it takes TIME. If you are ready to pay for a trainee to make all the accessibility stuff for my websites, good. Else YOU get out. Do you really think we have the TIME to spend on overkill stuff like that ? For myself, I have YEARS of work to do, not for yesterday, but for 4 years ago. Working 70h/week is not enough.
This advice doesn't work for any app where you want the UI to look and feel like a mobile app - at this point you are stuck with px (device independent pixels) otherwise you can't translate these things to other units - plus browsers do not have a standard for the font size settings, so there isn't really a clear case for using the other units to begin with.
I do not know a single browser that doesn't use 16px as the default font size. I am sure there is one out there, but even in that case we should be respecting the brower's font size by using rem values instead of px values. As for the argument with wanting you app to feel like a mobile app, that has nothing to do with the px unit. A px value in CSS does not depend on the number of pixels on your screen or the density of pixels. Instead a px is a set size (1/96th of an inch). This is why we can always convert between px, rem, em, %, etc. values.
@ The default text size may start at 16px, but the implementation on how they are configured is browser specific. Not sure why you felt the need to explain what device independent pixels were (seeing as I referenced them in my initial comment) but that doesn't change the fact that in an app meant to emulate the experience of a mobile app (or desktop app for that matter) you will still need some "fixed size" things that don't take up more than a certain part of the screen. I feel this kind of "advice" video is bad advice for new developers. You use the CSS units that are necessary to get the job done, and they all have their purpose.
It's BS. Each browser has minimum font size that works with px, too. But i recommend to use zoom. Because it's less likely gonna break design. And if you really need to you can use px to rem plugin in postcss
Setting the font-size to 62.5% is perfectly fine in my opinion. If you pull in 3th party libraries that that get messed up. Then those libraries use px as a base value. And are messed up when you change the font-size in the browsers. And that is the whole reason for using rem in the 1st place.
Percentage based font-size is literally insane.. If you make websites in 1995, yes it would be a valid option since there was no concept of columns or layouts, just stacked blocks.. you'll get rounding errors and fractional pixel values for every piece of text. Percentage is NOT meant for fonts, was never designed or intended to be used for font based calculations. If you've ever wondered why your fonts sometimes look blurry, it's because your % based calculations give you font-size: 16.6666666666666667px on the output, since monitors only work with pixels
Please provide a tutorial on printing actual sizes in ReactJS. For example, how to print a 1cm square that accurately represents a 1cm square on A4 paper.
Not gonna watch the video but using rem for media queries and gaps, margins, padding anything with layout is horrible idea. Should never be used like that. Its for fonts
Instead of dividing by 16 all the time, you can install an extension "px to rem by Marco N." When you hover over a px value, it shows the rem value and vice versa. You can also map a keyboard shortcut for the conversion, too.
That is better then my suggestion I am going to do this now is it a chrome extension or one for vs code?
@AlThePal78 Nice. VS Code.
You can also set the base font size to 10px (from 16px) so 20px = 2.0rem
6 years later I'm still coming to class.
Thanks kyle
His head is bobbing more these days.
In his final form, he will just be a disembodied head bouncing around on the floor while talking
He might have an Indian great great great great very great grandpa
now I can't unsee it
I hope he's seeing a doctor about it. Not good.
r.e.m.'s biggest hit: Losing My Pixels
*Every Pixel Hurts
*All Pixels Are The Same
Every time he said REM, I kept hearing that song. =)
I think it's wrong to use em/rem for padding/margin as it is wrong to use px for font-size. If you make everything proportional to the font-size it basically works like zoom. If someone wants that, well they will use zoom and not increase the font size. I mostly use em/rem for directly font-related stuff, size of an icon that sits on the baseline and its spacing to the font. The padding of a button or other boxes is clearly px for me, I don't need it to grow. Height of elements with text in it should never be defined in px or the text could get cut off. I like to test both zooming and changing the base font size and they should not behave the same, but both should not break your site.
totally agree. i also use rem for font related and pixels for everything else
This is exactly what I thought immediately after seeing this. I guess, author is still scratching the surface of the problem. Using rem as he suggested will eventually bring you to thinking, that it might be vise to change px to rem entirely, which is actually a bad idea (although not that obvious at first glance). There should be a well-thought, logically grounded and proven by time set of rules about that.
I totally agree and I think this is a serious concern and I don't get why this does not get more attention. Tools like tailwind even support this behavior (they use rem for almost all of their classes). Like why would you want the base font-size setting to mimic the Zoom (serious question)? Personally, when I think a webpage is hard to read, I just zoom. Other than that I am fine with the default font size setting and never changed it. But what do people expect that have vision problems? These people are most likely to change that browser setting to have larger fonts on all web pages. But what do they expect? Some kind of auto zoom on every page? Or just larger text while being fine with the fact that the web page may look a bit odd? Would be interesting to have some kind of case study. At this point I am not even sure what makes more sense.
Update: there even is a setting (at least in Chrome) for setting a default page zoom. This hardens my feeling that mimicking zoom behavior is kinda "useless". Interested in hearing other opinions
This is the reason all major CSS frameworks that jumped too early into the REM craze have now all gotten rid of REM based margins/padding. Too unpredictable and not practical in the real world. They all kept the REM font sizes, but everything non-font is back to pixels or some kind of calculation based formula
Design systems don't directly use em/rem, they use a calc to decide the padding/margin, so it's not growing proportionally to base px
To me most px values in CSS looks wrong, if I see it in a PR. You can consider making a rem converter function, if you use a CSS preprocessor like SCSS. Then you just input your pixel value and it returns the calculated rem value..... ex. rem(48) returns 3rem.
Thanks for this tip 👌
I liked the credibility .This shows great respect for others work and for the field in general . Great video as always Kyle .
Great explainer. Ever since choosing to use a combo of rem and clamp for typography, I've shaved off so much CSS that just feels hacky in hindsight.
I do everything in pixels, then use VSCode extension 'pixel to rem by Gwanduke'. Select the entire style sheet(Ctrl+A), then: Ctrl+Shift+P > 'convert px to rem of selections' and it's done. (You can also select individual blocks of code and do the transformation).
Interesting..
A lot of comments are saying that most users will just use zoom. Mostly true in the desktop. False in mobile: people just increase system font size.
If u use scss, u can just build a function px-to-rem or just use calc() function
I wonder how common it is for users to literally change their font settings, versus just using the zoom tool on a site-by-site basis.
Think of older people who have their phones font size increased which also increases the browser font size
Especially with more integrated devices like phones, the font size of the phone's settings might be inherited by the browser.
Plus this isn't just useful for old people, but also vision impaired people in general, who will probably have their global font size set very large.
@@AndyGaskin think of this from the business perspective. You don't want to lose even 1 potential client, right?
I work at a company that's extremely obsessive about accessibility and I've never gotten a bug about font sizes not scaling. I think most people needing larger fonts just hold their phones closer. I don't have any data on this though.
Just look at it this way, I like my text small but I would not change my browser settings, I would go to that website that i use every day settings page to look for a font settings.
See it doesn't only apply to your browser settings. Sites like facebook have font settings. and if you are working on a project like that all you need to do is to match your html {} style to the required pixel for large or small font sizes
I used rem's before by using 62.5% rule, and I didn't really understand how the thing works deeply enough, thanks for explaining it, I think I can take full advantage of it now
You really didn't answer the question, why shouldn't i use px in media queries. You could just change everything inside media, but leave values of mediaquery alone with px as it is. And 13:31 is why you better use pixels in mediaquery, because if user changes his settings, that value will not work as you intended anymore.
How user can even change text settings on his device?
Because nobody change this setting inside browser, like you shown
I like this. Wish other media would better respect this. For example, we still see Google Ads being defined in px. and while they do have *Fluid* ads, again it's a bit of a pain to keep doing conversions to make things fit nicely. Same with the default sharing of YT vids so we need to override with aspect ratio and so on... 🤯
Hello folks, since typescript is a superset of javascript, why browsers doesn't adopt it? 😊
Why is the font-size changing when you put in 1rem at 5:10 if it's supposed to inherit the browser's root font-size and 1rem is supposed to be the same as the root?
Good question....
So, so helpful!!!!! ❤❤❤
For some reason I find having different units (px, rem, em) in 1 file messy. I just go to the pixels, but seeing this video does make me rethink this. Maybe I'm stuck in the past in this case.
Nice job, however, I would advocate for using only .25, .5, .75, or 1 rem. Otherwise you will get fractional pixels in some cases.
That's the reverse way of doing it, you're supposed to start with the pixel value and convert to REM, not the other way around. You don't just use random REM values and hope you don't get a fraction pixel value, you pick a pixel value and divide by 16, giving you them REM. You'll literally never get a fraction doing it that way, you'll just get 1.125rem which is 18px. NEVER use raw REM values to define font-size, always start with pixels and convert to rem
Hi, thank you for this great video. Just a beginner question - why using
can use calc() or variables to simplify it (and keep it readable)..
Thanks for the video.. 👍
With you on the multiple of .125rem for a 16px default. Anything close to or less than .125rem is good enough for pixels, like box shadow. And a cheapsheet for rem fractions and multiples based on 16px default is pretty useful. Print it on a card and stick it somewhere visible or have it to hand.
5:40 this is why I always set padding esp on buttons in EM !!
Couldn't you just use a calc() if you want to get the exact pixel distance in rem? Best advice is to not cling to px. Most of your spacing rules can be custom properties which will also minimize the amount of converting you need to do and improve maintainability.
This is great. Thank you for this upload. You truly are my best teacher for CSS & Javascript.
Do you use farmeworks like tailwind?
What about ex unit? It is relative to the font used in that element, right?
"ex" is just the height of a (lower case) "x", so it's just another unit that scales like "em" does.
I'm gonna quote a counter-point, which seems to make this point moot:
"Browsers ignore html base size when rendering rems in media queries. So using rems or not does not make a difference."
But I'm not sure that's correct.
I use rem postprocessor that transforma all px values to rem!
Thanks for the explanation!
once again huge thank you! I must say I learnt about rem, this example makes it more understable that all the people telling you just to use it!
I can only highly recommend Web Devs Simplified Content, I taught myself programming in 100 hours with your videos. Mega cool content stay tuned!
So basically I am a newbie in CSS and I started using rems from beginning instead of px..
And that is what he is saying in the last part...
Thank you, very well explained. Can you make video about font swap, how to adjust browser's font into custom font so it has the same length and therefore doen't cause CLS?
imagine your elements that reles on pixels are rendered in your 8k monitor.
A thought-provoking video, thank you! :)
By the way, in VS Code you can find plugins to easily convert px to rem.
Using clamp functions for fluid responsive type scaling negates the need for media queries all together
Please, don't set your html font-size to anything not based on a rem/em value
Would love to get the course but 95$ is beyond my means atm
I have used html{font-size: 10px;} then set e.g. body {font-size: 1.6rem;} before. Disturbed to find out from this video that this disallows user to set font-size in browser settings. I came up a way to fix legacy sites that have used it: Change to html{font-size: 0.625rem} (0.625rem = 10px) and all works perfectly and saves you from having to correct every rem value.
using em/rem to setup margin and padding is a bad idea.
Huh? What happened to variables? utility classes? CQI?
Thank you!!
bro, please make a javascript backend course on node, express, mongodb, postgresql like javascript and react courses.
what I do is that I work with pixels in my head and when I'm going to write I just convert them to rem dividing by 16🤷♂
QAs were the ones having problems with this since they always want everything to look the same regardless of the devices they use.
Pardon me, but I think we solved this when we went mobile first?
TIme to bring back the 62.5% font size reset. 62.5% on 16px = 10px. No more calculators.
Another video with a title which includes the phrase "Stop using...".
I'm not wasting my time with it.
I'm experiencing some issues in my project. I developed a React application and implemented media queries for various devices. However, when I shared the entire project with my friend, the UI appears too large on his laptop. My laptop has a 17-inch screen, while he has only 14-inch laptop, and that may be the issue. I've tried several methods to resolve it, but nothing has worked. Can you help me please?
Allowing users to be able to influence the font size sounds like a nightmare from a design perspective...
Would this have any benefit from an SEO perspective?
doubt it. but it helps with accessibility of your app
Unfortunately, custom user sizing is not new. User defined style sheets, for instance, have been around for longer than zoom. Even older, holding alt while scrolling used to change the font size directly instead of zooming. To ignore user defined needs based on zoom functionality exists does hurt usability.
Custom user needs have been a part of web since the early www. Rem have been around for over a decade to address this very thing. None of this is actually new, it just didn't get to the majority of devs/designers. Learning these things for new sites/dev actually reduces work, debugging, and code significantly. Just takes a bit of practice.
I don't recommend befitting an already developed site tho. That sucks soooooo much.
@@logical-fuzz currently in most browsers "zooming" changes what "px" means, right?
@chris-pee I don't believe so. At least, it didn't used to be. It may now be more the case. It used to be much like zooming on an image. I haven't dipped into browser rendering code for quite some time (more than 7yrs), so I don't know for sure. However, most of the previous ways to customize your browsing experience are still in place today (even after more than 20 yrs for some). Consider this from a different perspective:
If it were a simple "this already changes px" this discussion would be very different. This discussion is not about whether or not a user can change "what px means". It's about what we can do to account for it, because they already can for more than 25yrs. So what are best practices in that type of environment? Espcially considering that it can be changed, has almost always been able to be changed (at least on the public www), in multiple ways and each with its own side-effects and implications. And that matters to many of us devs and designers if it affects the usability, integrity or presentability of our designs and work.
To venture further onto the wild side, specify font sizes in 'vw' or 'vh' ... no more zooming for those portions of the document 😁😁😈
Dude are you a vampire or what?! you don't age. Been watching your vidz since you started and you definitely look exactly the same
It's only been about 6 years since I started so not too much time has passed. We will see how I look 10 years from now :P
Deal with ranges using clamp().
15:50 To understand it easier just think of 0.125rem = 1px (when standard root font size = 16px)
Kevin Powell says don't use rem on sizes padding margins etc etc
@@moneyDev1111 honestly, with flex and grid, you don't need paddings and margins so often
@@moneyDev1111 he used "em" on paddings
As a front-end developer, I prefer to set the root font size, to not annoy designers and having to respond to many different people viewing elements different than the provided layout. I also like using em for paddings and titles margins too, associated with fluid clamp property for text size. This guarantees responsive elements with the minimum effort
yes, I'm also adding the root font size since there is always someone for whom the layout is displayed differently. I am unsure if it is because of different browser font sizes or some browser compatibility...
I know why to use px is a bad approach and I know it for decades. But what can you do when you're assigned to a project that uses px all over the place? And you say to your team: hey guys let's get rid of px and start using rm instead. And the response is always like this: we don't have time/money for that, keep it like it is, you can work with px, right?
What a pain...
Thank you sir
This is not simplified. :/
join the scrimba team
Root Element Multiplier
tnx
REMs go by 0.1 and do not change baseline font of anything. I know it does not go up by 1px, but who cares. Also easy to change via browser with alt+scroll in most browsers.
head
{
animation: sway 0.4s infinite;
}
actually your recommendation is totally wrong. it will lead to wrong breakpoints on safari
Apple never fails to disappoint developers
What is a Safari?🤣🤣
So we have to handle different screen size, different resolutions, and now different user defined police size ?
Yeah no.
Zoom if you need to, but I won't allow user defined police size.
I have better things to focus on.
@@Neckhawker "police size"?🤔
@@DainSPb font* size, sorry
That’s incredibly lazy. Support user accessibility or honestly get out. It’s not difficult. Making a website responsive takes little to no media queries as is-if you use custom properties and container query units.
@@HeyJes My websites ARE responsive, they just don't support custom font size, only zoom, which is largely enough.
And no, it doesn't takes only "little to no media queries" (and you should better use container queries), you have to TEST it, on several devices, resolutions, zoom, etc. it takes TIME.
If you are ready to pay for a trainee to make all the accessibility stuff for my websites, good. Else YOU get out.
Do you really think we have the TIME to spend on overkill stuff like that ?
For myself, I have YEARS of work to do, not for yesterday, but for 4 years ago. Working 70h/week is not enough.
You have also pixel ratio :D
Stop using “stop using” in your video title, please.
Next video: Stop using css
I recommend using ch units for media queries and responsive widths
nice lesson, but please man stop moving your head, i am a big fan , good work
This advice doesn't work for any app where you want the UI to look and feel like a mobile app - at this point you are stuck with px (device independent pixels) otherwise you can't translate these things to other units - plus browsers do not have a standard for the font size settings, so there isn't really a clear case for using the other units to begin with.
I do not know a single browser that doesn't use 16px as the default font size. I am sure there is one out there, but even in that case we should be respecting the brower's font size by using rem values instead of px values.
As for the argument with wanting you app to feel like a mobile app, that has nothing to do with the px unit. A px value in CSS does not depend on the number of pixels on your screen or the density of pixels. Instead a px is a set size (1/96th of an inch). This is why we can always convert between px, rem, em, %, etc. values.
What I would LIKE to do in my web app is say that “medium” equals 14px and then that changes the user’s range appropriately. Is that possible?
I think you meant pt instead of px.
Can you use REM for the actual media queries of mobile, iPad, and desktop.
@ The default text size may start at 16px, but the implementation on how they are configured is browser specific. Not sure why you felt the need to explain what device independent pixels were (seeing as I referenced them in my initial comment) but that doesn't change the fact that in an app meant to emulate the experience of a mobile app (or desktop app for that matter) you will still need some "fixed size" things that don't take up more than a certain part of the screen. I feel this kind of "advice" video is bad advice for new developers. You use the CSS units that are necessary to get the job done, and they all have their purpose.
It's BS. Each browser has minimum font size that works with px, too. But i recommend to use zoom. Because it's less likely gonna break design. And if you really need to you can use px to rem plugin in postcss
Setting the font-size to 62.5% is perfectly fine in my opinion.
If you pull in 3th party libraries that that get messed up. Then those libraries use px as a base value. And are messed up when you change the font-size in the browsers.
And that is the whole reason for using rem in the 1st place.
Percentage based font-size is literally insane.. If you make websites in 1995, yes it would be a valid option since there was no concept of columns or layouts, just stacked blocks.. you'll get rounding errors and fractional pixel values for every piece of text. Percentage is NOT meant for fonts, was never designed or intended to be used for font based calculations. If you've ever wondered why your fonts sometimes look blurry, it's because your % based calculations give you font-size: 16.6666666666666667px on the output, since monitors only work with pixels
Thank you sir lol
bruh.. stop moving you head.... its really distracting :))
Please provide a tutorial on printing actual sizes in ReactJS. For example, how to print a 1cm square that accurately represents a 1cm square on A4 paper.
Just use the CSS `cm` unit. It measures things in centimeters.
@@WebDevSimplified thank you. will try
Use Tailwind and forget this , am i right??
I do. Still interesting.
Yes, this is a good concept to know 👌.
Yess🎉
Yeah. I just can't take anymore these annoying CSS problems. So I'll let tailwind take care of them 😁.
Use whatever you want, but the understanding comes first
Media queries by itself should be considered as bad practice. I think W3 should invent something better
I don't believe this guy, he shakes his head in a No motion when he speaks. I think it's code for "not true"
English speaking like fractions, others, absolute with decimals. 10 vs 16 is to me a way more convenient base. Embrase metric !
Jesus. stop to shaking your head like this.
It’s the end of the world, as we know it (and I feel fine). …yeah, Gen X.
Not gonna watch the video but using rem for media queries and gaps, margins, padding anything with layout is horrible idea. Should never be used like that. Its for fonts
I found another real web developer.
Thank you sir
His head is bobbing more these days.