Responsiveness using CSS
Responsiveness is a key aspect of modern web design. It refers to the ability of a website to adjust its layout and content to fit various screen sizes and resolutions. This is important because today's users access the internet on a wide range of devices, including desktop computers, laptops, tablets, and smartphones.
In this blog post, we'll take a deep dive into how to create responsive designs using CSS. We'll start with the basics of responsive design and work our way up to more advanced techniques.
First, let's talk about the basics of responsive design. One of the most important things to understand is that responsive design is based on the concept of fluid grids. A fluid grid is a layout that adjusts to the size of the screen. This is achieved by using percentage-based widths instead of fixed pixels.
Using view-port units
Viewport units are a set of units in CSS that allow you to size elements relative to the size of the viewport, which is the visible area of a web page. There are four different viewport units: vw, vh, vmin, and vmax.
vw stands for viewport width and it allows you to set an element's width as a percentage of the viewport's width. For example, if you set an element's width to 50vw, it will take up 50% of the viewport's width.
.example {
width: 50vw;
}
vh stands for viewport height and it allows you to set an element's height as a percentage of the viewport's height. For example, if you set an element's height to 25vh, it will take up 25% of the viewport's height.
.example {
height: 25vh;
}
vmin stands for viewport minimum and it allows you to set an element's width or height as a percentage of the viewport's smaller dimension (either width or height). This unit is useful when you want an element to take up a certain percentage of the viewport's smaller dimension, regardless of whether the viewport is in portrait or landscape mode.
.example {
width: 50vmin;
height: 50vmin;
}
vmax stands for viewport maximum and it allows you to set an element's width or height as a percentage of the viewport's larger dimension (either width or height). This unit is useful when you want an element to take up a certain percentage of the viewport's larger dimension, regardless of whether the viewport is in portrait or landscape mode
.example {
width: 50vmax;
height: 50vmax;
}
Viewport units are very useful for creating responsive designs, as they allow you to size elements relative to the size of the viewport. This means that the element will automatically adjust its size based on the size of the screen.
It's worth noting that using viewport units can lead to some unexpected results if the user is zoomed in or out, as well as when a user changes the font size. It's recommended to use them in combination with media queries and other responsive design techniques.
Using percentages
Percentages are a powerful tool for creating responsive designs in CSS. They allow you to set the width and height of elements respective to their parent container. This means that the element will automatically adjust its size based on the size of the screen.
For example, instead of setting a div to a fixed width of 800 pixels, you would set it to a width of 80%. This means that the div will take up 80% of the available space on the screen, regardless of the screen size.
Here's a small example of how to use percentages to create a responsive div:
<body>
<div class="container">
<div class="responsive-div"></div>
</div>
</body>
*{
margin:0;/*Setting the margin and padding of every element to 0*/
padding:0;
}
body{
width:100vw;/*Making body full screen size*/
height:100vh;
}
.container {
background-color:black;
width: 100%;
}
.responsive-div {
background-color:red;
width: 80%; /* the div will take up 80% of the container's width */
height: 50%; /* the div will take up 50% of the container's height */
}
In this example, the .container class is set to take up 100% of the available space. The .responsive-div class is set to take up 80% of the container's width and 50% of the container's height. This means that the div will automatically adjust its size based on the size of the screen.
rem and em
rem (root em) and em (em) are units of measurement in CSS that are used to set the size of text and other elements on a web page. They are similar in that they are relative units, meaning that they are based on the size of the parent element or the root element.
rem units are based on the size of the root element (usually the <html> element) of the document.
<html>
<head>
<style>
/* set the font-size of the root element to 16px */
html {
font-size: 16px;
}
/* set the font-size of the h1 element to 2rem */
h1 {
font-size: 2rem;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is some text</p>
</body>
</html>
In this example, the html element has a font-size of 16px, so the h1 element will have a font-size of 32px (2 * 16px). If you change the font-size of the root element, the h1 element's font-size will also change, making it an easy way to manage the typography of the entire website.
em units are based on the size of the current element's font-size.
<html>
<head>
<style>
/* set the font-size of the body element to 16px */
body {
font-size: 16px;
}
/* set the font-size of the h1 element to 2em */
h1 {
font-size: 2em;
}
/* set the font-size of the p element to .8em */
p {
font-size: .8em;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is some text</p>
</body>
</html>
In this example, the body element has a font-size of 16px, so the h1 element will have a font-size of 32px (2 * 16px) and the p element will have a font-size of 12.8px (0.8 * 16px). If you change the font-size of the parent element, the child element's font-size will also change.
The difference between rem and em is the reference point. rem units are based on the root element's font-size while em units are based on the current element's font-size.
It's worth noting that rem units are recommended to use in most cases as it gives more flexibility and control over the typography of the website.
Using Media-Queries
You can also use media queries to change the percentage values based on different screen sizes.
@media (max-width: 600px) {
.responsive-div {
width: 90%; /* change the width to 90% for screens less than 600px wide */
height: 60%; /* change the height to 60% for screens less than 600px wide */
}
}
This way, you can ensure that your element will take up a different percentage of the space depending on the screen size.
It's important to note that not all properties can be defined using percentages, but most of the layout-related properties like width, height, padding, margin, etc. can be defined using percentages.
An Example to wrap up all of the things
Here is an example of a simple landing page for a college that demonstrates the use of rem, em, percentages, and viewport units in CSS.
<!DOCTYPE html>
<html>
<head>
<title>ABC College</title>
<style>
/* set the font-size of the root element to 16px */
html {
font-size: 16px;
}
/* set the font-size of the h1 element to 2rem */
h1 {
font-size: 2rem;
text-align: center;
margin-top: 5vh;
}
/* set the font-size of the p element to 1em */
p {
font-size: 1em;
text-align: center;
margin-bottom: 2rem;
}
/* set the width of the main container to 80% */
.main-container {
width: 80%;
margin: 0 auto; /* center the container on the page */
}
/* set the height of the logo to 10vh */
.logo {
height: 10vh;
margin: 0 auto; /* center the logo on the page */
}
/* set the height of the banner to 30vh */
.banner {
height: 30vh;
background-image: url(banner.jpg);
background-size: cover;
}
/* set the height of the footer to 5vh */
footer {
height: 5vh;
text-align: center;
font-size: .8em;
margin-top: 2rem;
}
</style>
</head>
<body>
<header>
<div class="main-container">
<img class="logo" src="logo.png" alt="ABC College Logo">
<h1>Welcome to ABC College</h1>
<p>A world-class education in the heart of the city</p>
</div>
</header>
<div class="banner"></div>
<footer>
Copyright ©2022 ABC College
</footer>
</body>
</html>
The above code sets the font size of the root element to 16px. The h1 element has a font size of 2rem, so it will be 32px (2 16px) and the p element has a font size of 1em, so it will be 16px (1 16px). The width of the main container is set to 80% of the viewport width and the height of the logo, banner, and footer are set using viewport units. The logo is centered on the page using margin: 0 auto and the banner has a background image with a background-size: cover to ensure that the image is always fully visible and the footer is also centered on the page using text-align: center.
You can adjust the values and see the changes to understand how these units work, also you can add more element with different units to see how they behave and affect each other, so feel free to play with this.