1) Responsive Images
Without the following code in your CSS, responsive design is pretty much impossible:
img {
max-width: 100%;
height: auto;
}This code tells the browser to make sure that images are never larger than their container (their parent element, in other words). This means that they will scale as the page size scales.
Note: we use max-width for this, not width. This maintains visual quality by preventing images from scaling beyond their own innate size: a 600px image inside a 900px container, for example, should not grow to 900px).
2. Media Queries
Media queries allow us to deliver additional styles to the page when certain conditions are met.
For example, imagine a content area with six articles. The HTML might look something like this:
<section class="articles>
<article>
<!-- article content would go here -->
</article>
<article>
<!-- article content would go here -->
</article>
<article>
<!-- article content would go here -->
</article>
<!-- more articles would go here -->
</section>On a phone we will typically want them to stack in a single column, but on a larger screen, we might want then to go two columns, and on an even larger screen, to go three columns. Maybe on really wide screens, we could go to six columns.
Here’s how we can do that in our css:
.articles {
display: grid;
gap: 2rem;
padding: 2rem;
}
@media screen and (min-width: 640px) {
.articles {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 960px) {
.articles {
grid-template-columns: 1fr 1fr 1fr;
}
.site-title {
font-size: 4rem;
}
}
@media screen and (min-width: 2400px) {
.articles {
grid-template-columns: repeat(6,1fr);
}
}
3. A Mobile First Approach
If you look at the above CSS, you’ll see a Mobile First approach. The code on the parent (.articles) sets the default properties. It is a grid parent, with 2rem of space between articles, and 2rem of padding.
By default, grid will have a single column, so the .articles div is a single column at any size below 640px screen width.
However, at 640px, that area will now be set to have two columns. It obviously is still a grid, and it will still have 2rem of space between each.
Then at 960px, that area wil be set to have three columns. Again, it will remain as a grid, and it will still have 2rem of space between each.
The idea here is as follows:
- Starting with the phone size is a good idea because a webpage or app’s phone’s layout is typically much simpler than than for tablet or desktop
- A escalating series of min-width queries allows us to add layout complexity as our page size increases. In other words, add queries in order of screen size changes: small, medium, medium-large, large, extra-large, etc.
- Note that our queries just deal with what changes. In the above code, the .articles DIV will have two rem of padding at all screen sizes, because we did not overrule that value in any queries. In other words, we do not need to repeat the display:grid or padding: 2rem values.
- This also allows us to control the cascade: imagine that our screen size is 2500px wide. This is wider than all three of our query breakpoints. In other words, the condition in each is true.
The only reason that our layout will go to six columns here is that the style that “wins” has come last in the css. - If our order of queries here were reversed, the large screen would get a two-column layout.