In this tutorial, we will learn how to implement responsive design CSS.Web developers use responsive design CSS to ensure a user-friendly experience. So let’s get started with the tutorial.
For responsive design CSS, we have to start with a meta tag in HTML. We must ensure to include
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
in our HTML. Here, the name attribute with the viewport value, allows the user to control the layout of the viewport. The name attribute gives instructions to the browser for controlling the viewport. The content attribute with the value width=device-width ensures the compatibility of the viewport’s screen with the device’s screen. The initial-scale attribute tells the page’s size, whether it is normal, zoomed in or zoomed out.
In CSS, we use the @media rule for responsive design. We need to fulfil certain conditions in order to apply this rule. The conditions are related to width, height, and resolution according to the developer’s requirements. Also, it is preferable to use box-sizing as a border box while working on responsive design. The border-box ensures the element takes the specified height and width even after using padding.
Now, let’s discuss about the @media rule. We mainly use media type as a screen for designing purposes. We will now take certain examples for you to look over.
Example 1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.parent::after {
content: "";
clear: both;
display: block;
}
[class*="child-"] {
float: right ;
margin:4px;
}
.element1 {
background-color: #ef125c;
padding:0.5vh ;
font-size: 2vh;
color: white;
}
.element2{
background-color: aquamarine;
padding: 20px;
font-size: 3vh;
margin-top:20px;
margin-bottom: 20px;
}
.element3{
background-color: rgb(70, 212, 9);
padding: 20px;
font-size: 2.75vh;
margin-top:20px;
margin-bottom: 20px;
}
.child-small {width: 25%;}
.child-big {width: 45%;}
@media only screen and (max-width: 600px) {
/* Mobile Phones: */
[class*="child-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="element1">
<h1>Responsive Design</h1>
</div>
<div class="parent" >
<div class="child-small element2">
This div is given 25% of the screen total's width for the desktop and will
be changed to 100% in the case of the mobile view.
</div>
<div class="child-big element3">
This div is given 45% of the screen total's width for the desktop view and
will be changed to 100% in the case of the mobile view. We will use the
@media rule to make the changes and style as per our needs in different
view modes. Here we took 600px for the mobile view. If the screen size
is less than 600px, then the @media rule will be applied.
</div>
<div class="child-small element2">
This div is also given 25% of the screen total's width for the desktop
view and will be changed to 100% in the case of the mobile view.
</div>
</div>
</body>
</html>
In the above code, the @media rule is used so that if the screen size is 600px or less than 600px, the child elements inside the parent div take 100% of the total screen’s view and if the screen size is greater than 600px, the CSS of child- class is applied for display purposes.
In the above code, we use::after as with the help of this parent element can keep track of its child elements during expansion while changing the screen’s size. Implementation of ::after is commonly known as clearfix technique, this ensures the proper expansion of floating childrens, if not used it might be possible that the parent element will collapse and the layout will break especially for grid designs while changing the screen’s size.
The output of the above code is Output.