4

Clever CSS for responsive design

 2 years ago
source link: https://dev.to/jmau111/clever-css-for-responsive-design-47ke
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CSS is everything (10 Part Series)

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;
  }
}
Enter fullscreen modeExit fullscreen mode

You can use it like this way:

h1 {
    font-size: calc(2.5rem * var(--scale));
}
Enter fullscreen modeExit fullscreen mode

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK