Tried to copy the windows calculator. Made it using React. Can be moved by dragging.
Setting height/width in px is generally a bad idea because it doesn’t allow the container to grow if the user manually increases the font size. I would highly recommend you use rem units instead.
Otherwise, nice job.
I dont really know how to use rem units. After reading a bit about it found out one is suposed to set the base font size of the <html> element, and every other font size will be relative to that if set in rems units. But how do I select the base font size, and how to calculate relative values for the other elements? You also refered to height and width values. Are those suposed to be in rem units also? Do you have some example code I can look at to get the hang of it? Thanks for your feedback.
That’s easy, you don’t, the user does by specifying the default font size in their browser. Most browsers ship with it at 16px but the user is free to change this. The nice thing about using rem units is that you don’t have to worry about the specific font size the user is viewing your page with because relative units take that into account automatically. You are just specifying a “relative” size to their default font size, a ratio (e.g. 1.5rem means 1.5 times bigger than the user’s default font size).
Yes, I would recommend it, this allows the element to grow as the font size gets bigger. For example, if you set the width of an element to 10rem and the user’s default font size is 16px then then actual width of the element is 160px. But if the user’s default font size is 24px then the width would be 240px, allowing the bigger font size to still fit within the element the same way the smaller font size would.
Concerning height, it’s usually a good idea not to set an explicit height on an element so that the element can grow as tall as needed to display its content. In your case, I would remove the height from the calculator div completely. When you do this the calculator will shrink because the secondary-display div doesn’t have any content. In special cases like this where you want a little extra height, I’d suggest using min-height, but on the secondary-display, not the calculator div. And again, I’d set that in rem units.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.