Responsive components
If you need a component that:
- Resizes responsively with the width of the viewport
- Should be ‘finger-sized’ on small screens
- Should stop growing at a maximum size
Then I have a trick for you.
/* Responsive circle thingy */
#responsive-circle-thingy {
/* It is relatively large on small screens, so it is 'finger sized' */
--sm-screen-size: 13vw;
--md-screen-size: 9vw;
--lg-screen-size: 7vw;
/* It ends its responsive growth at 6rem */
--max-screen-size: 6rem;
background-color: darkolivegreen;
position: relative;
border: none;
overflow: hidden;
display: flex;
place-content: center;
/* The following 4 lines make this component scale as a unit */
width: var(--sm-screen-size);
height: var(--sm-screen-size);
border-radius: calc(var(--sm-screen-size) / 2);
font-size: calc(var(--sm-screen-size) / 2.85);
}
@media(min-width:768px) {
#responsive-circle-thingy {
width: var(--md-screen-size);
height: var(--md-screen-size);
border-radius: calc(var(--md-screen-size) / 2);
font-size: calc(var(--md-screen-size) / 2.85);
}
}
@media(min-width:1024px) {
#responsive-circle-thingy {
width: var(--lg-screen-size);
height: var(--lg-screen-size);
border-radius: calc(var(--lg-screen-size) / 2);
font-size: calc(var(--lg-screen-size) / 2.85);
}
}
@media(min-width:1480px) {
#responsive-circle-thingy {
width: var(--max-screen-size);
height: var(--max-screen-size);
border-radius: calc(var(--max-screen-size) / 2);
font-size: calc(var(--max-screen-size) / 2.85);
}
}
Text
It’s not much to look at, but if you are in a position to resize the window, you should see that the text, height, width, and border-radius all scale proptionally to one another. Further, the circle is finger sized on a small device, taking up a higher portion of the viewport, and is smaller, as needed on larger screen sizes.