No, I made no performance comparison but I don't think there is any issue with performance.
I'm wondering why you would prefer css-calculations over @media? --> simply because it allows me to have a very simple code. As you can see, I replaced 4 media queries with only one CSS declaration. This is a basic example. Imagine the case where you have a real project and how many line of code you can reduce using such trick.
In addition to that, we can easily adjust the breakpoints using CSS variables and have different breakpoints per element (you don't have such flexibility with media query).
Finally, You can see this as a different way of thinking. You will rarely find such article around the net so by showing you such trick I may lead you to think about simiar tricks using clamp()/max(), etc
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
No, I made no performance comparison but I don't think there is any issue with performance.
I'm wondering why you would prefer css-calculations over @media? --> simply because it allows me to have a very simple code. As you can see, I replaced 4 media queries with only one CSS declaration. This is a basic example. Imagine the case where you have a real project and how many line of code you can reduce using such trick.
In addition to that, we can easily adjust the breakpoints using CSS variables and have different breakpoints per element (you don't have such flexibility with media query).
Finally, You can see this as a different way of thinking. You will rarely find such article around the net so by showing you such trick I may lead you to think about simiar tricks using clamp()/max(), etc