Responsive QR Code Component

Solution retrospective
I would like advice regarding Units of Measurement. I am not entirely sure which unit is the best and when. I have read a lot and it does appear to be a personal preference. I base this upon the many differing opinions.
I am yet to learn Bootstrap. And I only use 'vanilla' CSS (unless Flexbox is not considered 'vanilla'?!). I have read that, for the time it takes to learn Bootstrap, I should just consider continuing with more vanilla CSS and learn CSS Grid instead?
Thank you for taking the time to have a look at my work!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kxnzx
Hi @TotallySly,
I would like to share what I have learned about Units of Measurements and how I use them + why:
- REM Units for defining width’s of elements, margins, padding, and font-sizes (using this relative unit is important for accessibility settings, they adapt to the user's browser > people with visual impairment can zoom in to make the font-size/components on the screen bigger/smaller)
- Pixels for shadows & borders (pixels are static > borders/shadows need to stay the same size always)
- EM Units for media queries & padding in buttons (this is also a relative unit > the padding will auto adjusts to the font-size of the button)
- % use this in combination with a max-width ( I personally mostly use this to define the width and min-height of the html element, you can also use vh or vw for this. However I have read somewhere that this is not the best practice to do yet)
- CH Unit for defining the of width paragraphs
There is a lot of info about this available, but this out of my head what I have learned for now. I hope you can get something out of this.
Greetings, Kxnzx
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord