2020-04-16
2273
#css
Dannie Vinther
17154
Apr 16, 2020 ⋅ 8 min read

Flexible layouts without media queries

Dannie Vinther Everything frontend.

Recent posts:

Understanding Solid Js Props A Complete Guide From Beginner To Advanced

Understanding SolidJS props: A complete guide

Let’s see how SolidJS props work to promote component reusability, exploring basic to advanced concepts for a complete understanding.

Temitope Oyedele
Dec 7, 2023 ⋅ 11 min read
Eleventy Vs. Next.js Static-Site Generation

Eleventy vs. Next.js for static site generation

We evaluate Eleventy and Next.js and compare both static site generators in terms of performance, developer experience, scalability, and ecosystem.

Nelson Michael
Dec 7, 2023 ⋅ 11 min read
Build Full-Stack App React Goxygen

Build a full-stack app with React and Goxygen

We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.

Clara Ekekenta
Dec 6, 2023 ⋅ 8 min read
Express Js Adoption Guide Overview Examples Alternatives

Express.js adoption guide: Overview, examples, and alternatives

Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]

Antonello Zanini
Dec 6, 2023 ⋅ 17 min read
View all posts

12 Replies to "Flexible layouts without media queries"

  1. Big thanks for the article! I like the way you describe things on high quality examples (especially GIFs and calculation explanation), also It was nice to know about min() max() and clamp() queries (never heard about them before). It would be nice to have more content like this in the future!

  2. Great information and explanations to fuel CSS Grid knowledge. Currently, I am trying to find work-arounds so that my CSS grid layout will also work in IE (yes, I know). If you happen to have any insights (display: -ms-grid, etc.), I would be very interested in learning what has worked for others. Thank you for publishing & sharing your knowledge.

  3. Would be really interesting to know whether there are any frontend performance implications to using this at scale.

    I doubt it would be that significant (as computers are generally great at performing maths calculations), but on the other hand, some of what is going on here is potentially, quite complex.

  4. About the font size wouldn’t be easier to put it like
    min(max(calc(26/1280*100vw), 16px), 26px)
    You first tell the browser that the larger font size will be 26px and the smallest 16px. Then with the calc you say from 1280px viewport start shrink the size until it reaches 16px.

  5. Hi Alexander. This is great! It is definitely easier. And we can even omit the calc-notion.

    Perhaps we could even do:
    “`css
    h1 {
    –fmax: 26;
    –fmin: 16;
    font-size: min(max(var(–fmax)/1280*100vw, var(–fmin) * 1px), var(–fmax) * 1px);
    }
    “`

  6. Thanks, great article!
    For now safari doesn’t support `clamp` but if you want you can use this postcss plugin:
    github.com/polemius/postcss-clamp

  7. Thanks, Ivan. The current version of Safari (13.1, from April) actually does support clamp(), although I found out, that it does work for font-sizes. This seems like a bug that’ll be fixed sooner rather than later

  8. Thanks, Dannie for answering. Cool, I like it that Safari has this feature too 🎉 However I think I still will be using postcss plugin `postcss-clamp` because Safari 13 still in my support browser list.

Leave a Reply