Responsive Web Design Fundamentals

1. Use rems or ems instead of pixels

html {
font-size: 24px;
}
h1 {
font-size: 1.5rem;
/* equivalent to 36px */
}
.nav-container {
font-size: 16px;
}
.nav-container li {
font-size: 0.75em;
/* equivalent to 12px */
}

2. Use Percentages For Sizing

.movie-card-container {
height: 500px;
width: 400px;
}
.movie-card {
height: 50%; /* 250px */
width: 75%; /* 300px */
}

3. Implement Media Queries

Kaboom.
h1 {
font-size: 1rem; /* global style */
}
@media only screen and (max-width: 480px) {
h1 {
font-size: 0.5rem;
/* style only implemented when screen width < 480px */
}
}
@media only screen and (max-width: 1550px) {
h1 {
font-size: 1.5rem;
}
#header img {
width: 10%;
height: auto;
}
#card img {
width: 75%;
height: auto;
}
.circuit-list-item h5 {
padding: 0.25em;
}
}
@media only screen and (max-width: 1000px) {
.circuit-list-item h5 {
font-size: 0.5rem;
}
}
Ah, much better.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeff Golden

Jeff Golden

24 Followers

Frontend developer, mountaineer, husband and dog wrangler.