In today's digital world, responsive design is crucial. It guarantees that webpages and apps will run smoothly across different devices. With responsive design, you can increase your customer base, improve the user experience, and foster success.
There are some amazing techniques available that can help you make your website responsive. Here we will concentrate on viewport units, media queries, meta tags, Flexbox, and the CSS Grid.
You want to know more about those methods, right?
Let's get going!
Meta tags are placed inside the <head> section of the HTML document and are not displayed on the page itself.
With the viewport meta tag in the HTML code of a webpage, you can control how the webpage looks on different devices with varying screen sizes.
How the webpage displays without a Viewport Meta Tag:
Example:
<head>
<meta name="viewport" content="width=device-width", initial-scale=1.0" >
</head>How the webpage displays with Viewport Meta Tag:
Media queries are essential for responsive web design. You can apply different styles using media queries depending on factors like screen size, device orientation, and aspect ratio.
Examples: Here are some examples that you can use in your projects:
- Write a media query to apply styles when the viewport width is 340px or less.
@media (max-width: 340px) {
.item {
font-size: 20px;
background-color: lightgreen;
}
}In the media query above, the styles will be applied when the viewport width is 340px pixels or less.
Demo:
- Write a media query to apply styles when the device is in landscape mode.
@media (orientation: landscape) {
/* Styles */
}Note that you can also style 'portrait' mode using a media query. Change "landscape" to "portrait" and add styles.
- Write a media query to apply styles when the aspect ratio is 1:1 or larger.
@media (min-aspect-ratio: 1 / 1) {
/* Styles */
}- Write a media query to apply styles when the aspect ratio is 16:9 or larger.
@media (min-aspect-ratio: 16 / 9) {
/* Styles */
}- Write a media query to apply styles when the viewport width is between 200px and 300px.
@media (min-width: 200px) and (max-width: 300px) {
/* Styles */
}Media queries give you a lot of flexibility when it comes to customizing your website's layout and design for different devices and screen sizes.
CSS Grid is a powerful layout framework that allows you to create intricate and responsive grid-based layouts. It offers a versatile replacement for traditional float-based layouts and makes creating multi-column designs easier.
The minmax()function helps you set the minimum and maximum grid
track sizes. Using this method, you can give grid objects a minimum width and let them expand to a maximum width if there is
extra space.
The auto-fit keyword allows the columns to adjust and fill available space while respecting their minimum and maximum sizes. On the other hand, the auto-fill keyword ensures that the grid is always filled by adding empty tracks to fill in additional
space.
Examples Here are some examples that you can use:
- Use
auto-fillto create columns that automatically fill the available space.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}Demo:
- Use
auto-fitto create columns that automatically adjust their width.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}Demo:
- Use
minmaxto create columns with a minimum width of 300px.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}- Use
grid-auto-rowsproperty to sets the height of automatically generated rows to 50px.
.grid-container {
display: grid;
grid-auto-rows: 50px;
}In addition, there is another sizing function called fit-content(). The fit-content() function in CSS Grid makes that grid tracks or items never go smaller than the minimum (min-content) size or bigger than the maximum(max-content) size based on the content. You can make your designs more responsive and flexible by using fit-content() to create dynamic, flexible grid layouts.
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
}With viewport units, you can specify sizes in relation to the viewport's dimensions in CSS. They can be used to design layouts that change according to the size of the screen. The difference between viewport units and percentage(%) units is that viewport units (vw and vh) are based on the entire window, whereas percentage units (%) are based on the local context.
Examples:
.heading {
font-size: 10vw; /* Responsive font size */
margin-bottom: 2vh;
}
.description {
font-size: 5vh; /* Responsive font size */
}Demo:
.hero {
height: 100vh;
}
.image {
width: 50vw;
}In this example, the vw command sets the width of the image to 50% of the viewport width and the height of the hero section to 100% of the viewport height.
div {
height: 50vh;
}The vh specifies the height of the div in this example to be 50% of the viewport height.
div {
height: 50svh;
}The svh command, in this case, adjusts the height of the div element to 50% of the viewport's shorter dimension (height or width).
div {
height: 50lvh;
}In this case, the lvh sets the viewport's height to 50% of its longer dimension.
div {
height: 50dvh;
}Sets the height to 50% of the viewport diagonal.
Viewport units provide an easy way to create responsive designs instead of solely using media queries. Check browser support here.
A quick and effective way to use Flexbox to implement responsive design is by using the flex-wrap property. Flex items will, by default, try to fit in a single line within the flex container. The flex-wrap property is set to nowrap by default. However, with the flex-wrap property set to wrap, the items will wrap to a new line when the container's width becomes too small to fit them all on a single line.
Example:
.container {
display: flex;
flex-wrap: nowrap;
}
.item {
flex: 1 0 200px;
}Demo:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 200px;
}Demo:
In cases like the one above, where there is insufficient width, the flex container will wrap the items into a new line. Each item will have a minimum width of 200px (flex-basis: 200px) and a flexible width that allows it to grow (flex-grow: 1) and shrink(flex-shrink: 0).
In CSS, you can specify a value that falls within a given range by using the clamp() function.
Example:
.text {
font-size: clamp(14px, 3%, 24px);
}Demo:
This example demonstrates how to change the text element's font size using the clamp() function. The minimum font size is 14px, the maximum font size is 24px, and the preferred font size is 3% of the viewport width (3vw).
The browser will automatically select the preferred font size to make sure that text is readable and responsive on screens of all sizes.
Using the min() function for widths and the max() function for padding and margin, you can create responsive designs with controlled minimum and maximum dimensions for elements that guarantee a constant and aesthetically pleasing layout across different screen sizes.
The min() function example:
.container {
width: min(300px, 50%);
}The container in this example will have a minimum width of 300 pixels or 50% of the width of its parent container, whichever is greater.
The max() function example:
.container {
padding: max(20px, 5%);
margin: max(10px, 2%);
}The padding and margin of the container are each limited to a maximum of 20px and 10px, respectively, or 5% and 2% of its width, in the max() function example. This ensures controlled spacing while upholding the established limits.
You can use height, width, and object-fit properties to resize an image so that it fits within a div container.
This can come in handy when you want to make sure that an image is a specific size or that it looks good on all devices.
- Responsive Design - MDN
- Learn Responsive Design - Freecodecamp YouTube Channel 4 hours Course
- Learn Responsive Web Design(Intermediate level ) - Free Course with Kevin Powell on Scrimba
- Complete Web Developer in 2023: Zero to Mastery - Bootcamp
That's pretty much it. I really hope it gives you a better understanding of Responsive Design. Message me on Twitter if you have any questions.