This content originally appeared on DEV Community and was authored by ·ſ
CSS is weird. It's neither a programming language nor a design program such as Photoshop. It can be tedious and time-consuming if you're not a front-end ninja, especially the responsive part.
Many devs won't spend their time doing clumsy CSS to get mediocre results. I don't blame them at all. It's a pragmatic choice.
I was looking for new techniques to improve my CSS skills, especially media queries. Many blog posts recommend not using them anymore when it's possible.
For now, I can't do what I want without using a few of them, but I found a technique that reduces the number of media queries drastically. It leverages the benefits of CSS variables:
@media (min-width: 360px) {
:root {
--rwd-factor: 0.8;
}
}
@media (min-width: 768px) {
:root {
--rwd-factor: 1;
}
}
You can use it like this way:
h1 {
font-size: calc(2.5rem * var(--scale));
}
You can easily style for various screen sizes by using a common factor while keeping the CSS stylesheet pretty light.
I learned it from this blog post. Of course, it's not the only possible approach, but I found it efficient.
You won't achieve the highest level of accuracy, but it just works.
This content originally appeared on DEV Community and was authored by ·ſ
·ſ | Sciencx (2021-11-09T21:00:41+00:00) Clever CSS for responsive design. Retrieved from https://www.scien.cx/2021/11/09/clever-css-for-responsive-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.