Responsive components

If you need a component that:

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.

Leave a Reply

Your email address will not be published.

Color scheme: