Hello, good day! I have a question as a beginner learning front-end development. I’m feeling a bit confused and hoping someone can help me figure things out. When I first started learning HTML and CSS, I used my phone and was able to code a few pages successfully. But now that I have a laptop, when I view my site on it, everything looks completely different. The page doesn’t take up the full screen, and my buttons and elements are all sized differently and look messy. I realized I had been using pixels for all my design measurements, and that’s likely why the page isn’t responsive on the laptop screen. So I started learning about rem and em units, but these two are also confusing me.
I understand that rem makes elements shrink or grow based on the browser’s font size. Does this mean if I use rem consistently on all elements, the page will look the same on different devices, like phones or laptops? Will my buttons and other elements stay the same size across screens if I use rem for everything?
The initial design was intended for desktop view, but even on the phone, it didn’t look quite right. I don’t fully understand em either. I feel like I could just use rem to make my page consistent, so that if a user increases the font size, all elements increase proportionally.
I’m also confused about using em in certain situations. If I set the font size of a <div> to 2rem and then set the font size of content inside it to 2em, the content will be bigger than the <div>, right? Why use em at all if rem can create consistency across the whole page?
#I really need help understanding how to use these units correctly.
agile hill
sterile chasm
use rem for consistent scaling across your whole page and em for elements that need to adjust relative to their parent both help with responsiveness, but media queries and flexible units are key too