I've been working with CSS and have generally used fractions of `rem` as my unit of measurement, thinking I could adjust the entire document's scale by changing the `font-size` on the `` element. I recently learned that `px` is already considered a logical pixel, so I don't have to worry about the density of retina screens, and it appears that `px` doesn't factor in the device's scale settings. I still believe that using `rem` is important for maintaining consistent scaling because CSS transformations like `scale` don't affect the layout directly.
Since `rem` is dependent on `px` (i.e., `html { font-size: px }`), I'm trying to figure out what a logical pixel with a scale factor would look like in my own UI design framework. Essentially, I want to define a unit that is anchored in logical pixels but can be adjusted for scaling in some way. What's your take on creating a CSS unit that incorporates this scale factor, especially considering I've concluded that it might just be easier to use `px` as it is along with some scaling method like `document.body.style.zoom`?
3 Answers
It sounds like you're trying to reinvent the wheel a bit here. The key is that `px` already accounts for retina and OS scaling thanks to browser handling. If you need a global layout-aware scale factor, just focus on adjusting `html { font-size }` based on a scale variable. No need for a new unit!
You might want to consider using CSS variables! You can set something like `--scale: 1; --unit: calc(16px * var(--scale))`, and then simply use `font-size: var(--unit)` to manage scaling. This way, you can easily adjust the scale just by changing one variable. Honestly, it seems like you're overcomplicating it a bit since `rem` actually handles a lot of this for you already.
Just to clarify your thought process: if you're using Windows 10 and increase the "make everything bigger" setting, that actually works with `px` too, right? This means you probably don't need to pursue creating a new unit for your design at all. Also, don't forget you can use `document.body.style.zoom` for layout-scaled adjustments—great tool!
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads