- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What to understand about Responsive Websites?
What is a Responsive Website?
If we open the responsive website on any device, every website page's content looks fine without overflowing or being overridden by other web pages. For example, open the TutorialsPoint.com website on any device of any dimensions. Users can observe that the content of the webpage remains the same, but the replacement of the content becomes different so that the content is readable.
So, the basic thing of the responsive website is to make content visible and stylish on every device.
Why do we Require a Responsive Website?
Now, the question is why we should require a responsive website. Well, here is the answer.
In the early days, users were visiting the website from the desktop only, but nowadays, users visit the website from different devices of different dimensions, such as mobile and tablet devices. Even most websites have more visitors from mobiles than from the desktop.
Nowadays, every business is moving on the internet and trying to get customers online via the website. If any users come to your website from mobile devices, and if your website is not responsive, users immediately close your website and go to the competitor's website.
So, a responsive website is useful to get more customers and visitors.
How to Start Creating a Responsive Website?
We need to use the common breakpoints for the browser size and need to style the HTML elements accordingly. Here are the common breakpoints.
Mobile: 360 x 640 px Tablet: 768 x 1024 px Laptop: 1366 x 768 px HDdesktop: 1920 x 1080 px
As a first step, we must add the meta tag below in the <head> section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now, our HTML content will remain the same for the webpage, but we need to write CSS in such a way that HTML content can be easily readable on every device.
Example 1 (Set Element Dimensions in Percentage)
In the example below, we have a ‘container’ div element containing two ‘col’ div elements. We have set the dimensions of the container div element in the percentage and the dimensions for the ‘col’ div element in the percentage.
In the output, users can observe that it is readable in all devices of any dimension.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
height: 100px;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
}
.col {
width: 47%;
margin: auto 1%;
height: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
font-size: 10px;
}
</style>
</head>
<body>
<h2>Creating the responsive website by setting up dimensions in percentage for the HTML element </h2>
<div class="container">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
</div>
</body>
</html>
Example 2 (Using the Media Query)
In the example below, we have used the media query to create a responsive web page design. Using the media query, we can add breakpoints to the web page and style the web page separately for every device.
Here, users can observe that we have changed the dimensions of the ‘main’ div for the devices that have widths less than 600px. Also, we have changed the font-size, font color, and margin for the mobile devices using the media query.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main {
width: 50%;
height: 50vh;
display: flex;
align-items: center;
text-align: center;
margin: 10px auto;
flex-direction: column;
}
img {
width: 100%;
height: 100%;
}
.description {
width: 100%;
height: 100%;
font-size: 30px;
color: red;
margin-top: 20px;
}
/* writing the above css code for table and mobile devices using media query */
@media screen and (max-width: 600px) {
.main {
width: 100%;
height: 100vh;
margin: 5px auto;
}
.description {
font-size: 20px;
color: blue;
margin-top: 10px;
}
}
</style>
</head>
<body>
<h2> Creating the responsive website by Using the media Queries in CSS </h2>
<div class = "main">
<img src = "https://yt3.googleusercontent.com/H_Xbai9qfD-0DWSLfOuwMa4dieJHcz-tJa18UaoUf6C7TerPWvcuhatFAudCfGVJ-dszbWDnhA=s900-c-k-c0x00ffffff-no-rj"
alt = "logo">
<div class = "description">
The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of
the screen.
</div>
</div>
</body>
</html>
Example 3 (Using the Clamp Function)
In the example below, we have used the clamp() function to make our web page responsive. The clamp() function takes three arguments, and the first is the minimum width, the second is a percentage, and the third is the maximum width.
Here, we have passed the 400px as a first argument, 30% as a second argument, and 600px as a third argument of the clamp() function, which means that in any device, card width never goes below 400px, and above 600px. If 30% of the screen width is between 400px and 600px, that value will be set as the width of the card.
In the output, users can observe the card on different devices and check if it is responsive.
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.card {
height: 400px;
width: clamp(400px, 30%, 600px);
background-color: rgb(13, 247, 247);
padding: 5px;
border-radius: 12px;
border: 2px solid green;
}
img {
height: 90%;
width: 100%;
border-radius: 12px;
}
.content {
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 10px;
color: green;
}
</style>
</head>
<body>
<h2> Creating the responsive website by Using the clamp() function in CSS </h2>
<div class = "card">
<img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
Alt = "tree image">
<div class = "content">
Save the Environment!
</div>
</div>
</body>
</html>
Example 4 (Introducing the Flexbox)
In the example below, we have introduced Flexbox to make a responsive web page. We can use ‘display flex’ to display any HTML element as a flexbox. After that, we can use various CSS properties to customize the content of the Flexbox.
Here, we have a ‘row’ div containing multiple ‘col’ div. The dimensions of the ‘row’ div change according to the device's dimensions, but the dimensions of the ‘col’ div are fixed. So, we have used the ‘flex-wrap: wrap’ CSS property to wrap the content inside the ‘row’ div. It shows the total number of ‘col’ divs in the single rows based on the width of the row.
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.row {
height: auto;
width: 90%;
margin: 0 auto;
background-color: yellow;
padding: 10px 20px;
border: 2px solid green;
border-radius: 12px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
height: 200px;
min-width: 200px;
background-color: red;
border: 2px solid green;
border-radius: 12px;
margin: 10px 20px;
}
</style>
</head>
<body>
<h2>Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
<div class = "row">
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
</div>
</body>
</html>
Users learned to make the website responsive in this tutorial. The above examples taught us various CSS properties, functions, and rules to make a responsive website. Developers require to use all stuff together to make a real-time website. Here, we have used single property in a single example for the learning purpose only.
57 Views
