Community Wiki & Forum
Frontend Development
January 2024
42 active contributors
Master fluid layouts, media queries, and mobile-first design
Start with mobile styles as your base, then enhance for larger screens using min-width media queries. This ensures a solid foundation for all devices.
/* Mobile-first base styles */
.container {
width: 100%;
padding: 1rem;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}Use clamp() to create responsive typography that scales smoothly between breakpoints without media queries.
/* Fluid font size that scales between 16px and 24px */
h1 {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
/* Using CSS custom properties */
:root {
--fluid-min: 1rem;
--fluid-max: 1.5rem;
--fluid-val: 2.5vw;
}
.title {
font-size: clamp(var(--fluid-min), var(--fluid-val), var(--fluid-max));
}Container queries allow components to respond to their container's size rather than the viewport, enabling truly modular responsive components.
/* Define a container */
.card-container {
container-type: inline-size;
container-name: card;
}
/* Query the container */
.card {
display: flex;
flex-direction: column;
}
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
}No comments yet. Be the first to join the discussion!