What do you need to know about responsive websites?
What is a responsive website?
If we open a responsive website on any device, the content of each web page will not overflow or be covered by other web pages. For example, open the TutorialsPoint.com website on any size device. Users can observe that the content of the web page 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 need a responsive website?
Now, the question is why we should require a responsive website. Well, here is the answer.
Earlier, users could access the website from desktop only, but now, users can access the website from devices of different sizes, such as mobile and tablet devices. Even most website traffic comes from mobile devices, not desktop devices.
Nowadays, every business operates on the Internet and tries to attract customers online through a website. If a user accesses your website from a mobile device and your website does not have a responsive design, the user will immediately close your website and go to a 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 common breakpoints based on the browser's dimensions and style the HTML elements accordingly. The following are 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 have to add the following meta tag in the
section.<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now, our HTML content will remain the same as the web page, but we need to write the CSS in such a way that the HTML content can be easily read 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, the user can observe that it is readable on any size device.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Creating the responsive website by setting up dimensions in percentage for the HTML element
Column 1Column 2
Example 2 (Using the Media Query)
In the example below, we use media queries to create a responsive web design. Using media queries we can add breakpoints to web pages and style them individually for each 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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Creating the responsive website by Using the media Queries in CSS
The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of the screen.
Example 3 (using 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 are passing 400px as the first parameter, 30% as the second parameter, and 600px as the third parameter of the clamp() function, which means that on any device, the width of the card will never be Less than 400px and no more than 600px. If 30% of the screen width is between 400px and 600px, the value will be set to 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 id="Creating-the-responsive-website-by-Using-the-clamp-function-in-CSS"> 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 (Introduction to Flexbox)
In the example below, we introduce Flexbox to make responsive web pages. We can use "display flex" to display any HTML element as a Flexbox. Afterwards, we can use various CSS properties to customize the contents of 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 id="Creating-the-i-responsive-website-i-by-Using-the-media-Queries-in-CSS">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>
In this tutorial, users learned how to make a website responsive. The above example shows us various CSS properties, functions, and rules used to make responsive websites. Developers need to combine all of this to produce a live website. Here we use a single attribute in a single example just for learning purposes.
The above is the detailed content of What do you need to know about responsive websites?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
