The ability of a web page or application to adapt and display properly on different devices and screen sizes, such as desktop computers, laptops, tablets, and smartphones.
In short words Looking a web page good in all devices.
To make an HTML page responsive, you typically use CSS (Cascading Style Sheets) media queries and fluid layout techniques.
Let get some of the main method used in a webpage to make it responsive.
Add the following meta viewport tag in the <head> section of your HTML document. This tag sets the viewport to the device's width and scales the page accordingly.
EDUCATION
<!DOCTYPE html>
<html>
<head>
<title>Viewport Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>This wil make the page look good in all devices</p>
</body>
</html>Use relative units like percentages and ems instead of fixed pixel values for widths, heights, and margins. This allows elements to adjust based on the screen size.
<!DOCTYPE html>
<html>
<head>
<title>Viewport Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
div {
background-color: green;
}
</style>
</head>
<body>
<div style="width: 100%;">A 100% width</div>
<div style="width: 10em;">A 5em Width</div>
</body>
</html>Media queries allow you to apply specific CSS styles based on the device's characteristics (e.g., screen width). They are enclosed in @media blocks and can be used to adjust the layout and appearance for different screen sizes.
<!DOCTYPE html>
<html>
<head>
<title>Viewport Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* For screens smaller than 768px */
@media (max-width: 767px) {
/* CSS rules for small screens */
.p1 {
font-size: 10px;
}
}
/* For screens between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
/* CSS rules for medium-sized screens */
.p1 {
font-size: 15px;
}
}
/* For screens larger than 1023px */
@media (min-width: 1024px) {
/* CSS rules for large screens */
.p1 {
font-size: 20px;
}
}
</style>
</head>
<body>
<p class="p1">With p1 class</p>
<p>Without p1 class</p>
<p>Try changing the width</p>
</body>
</html>To make images responsive to device width keep the width and height in percentage values instead of fixed values in px.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now
