Pankaj
Parashar developer

twitter
email@pankajparashar.com

Look Ma! No Media Queries

If you look under the hood of this website, you will not find any Media queries. That doesn’t mean this website isn’t responsive. It means it is practically possible to design modern websites with no media queries.

May 27, 2020  ×  1 min read

If you look under the hood of this website, you will not find any Media queries. That doesn’t mean this website isn’t responsive. It means it is practically possible to design modern websites with no media queries.

I’ll focus on two basic elements that changes as screen size changes which typically warrants using media queries in CSS.

Font-size

I use the clamp() function to scale the font-size between a minimum and a maximum value as the screen size changes with respect to the viewport. More on CSS clamps here.

body {
    font-size: clamp(18px, 1.25vmax, 1.5em);
}

Layout

The site layout is designed using CSS Grids wherein we can use the repeat() function to specify the column template for the grid. repeat accepts auto-fit as one of the keywords to define how the grid should behave to fill the cells in the grid container.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

Click here to know more about the auto-fit and its sibling auto-fill keywords.

Did you enjoy reading this artice? I'd love to hear your thoughts. Feel free to send me a tweet or open an issue on Github to add your comments.

Next
Dark Mode

Previous
Back to Top reboot

2012-2020
Light/Dark

Back to Top