Responsive in HTML-HTML Tutorial-php.cn

Table of Contents

Syntax Used in HTML Responsive Design

Examples of Implementing Responsive in HTML

Example #3

Conclusion

Home

Web Front-end

HTML Tutorial

Responsive in HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:46 PM

html html5 HTML Tutorial HTML Properties HTML tags

Responsive design in HTML is the concept that fits the HTML element according to device size for every screen size. Those elements should look perfect in every device like mobile, desktop or tablet. Responsive design is the thing in which element gets quickly adjust as per available space in the display view. It based on things like viewport width, text size, responsive image, and other elements. Nowadays, there are many new techniques involved in responsive designing term to perfect suits design with different browsers as well as devices. Media queries are one of the best parts, including in responsive design trough CSS, which tells the browser to get adjusted as per their user’s device size.

Syntax Used in HTML Responsive Design

Responsive design in HTML is dependent upon so many factors; let’s see them one by one:

1. Setting Viewport: Below’s Syntax is used to set the viewport to the user page view, which helps the browser control the dimensions of the web page and its scaling. It will automatically adjust elements as per different device sizes and display screens as per the device.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Copy after login

2. Responsive Images: Whenever adding some images to our web page, it is also necessary to display those images in the proper size on each device’s screen size.

<div class='section content'>  <img class='example' src='images/example.svg' /></div>

Copy after login

3. Set Width Property: With the help of CSS, we can set the width to 100%, so it helps to make the element responsive in the screen display view.

width: 100%;

Copy after login

4. Using Max Width Property: same as the width, one can set the max-width of the element to 100 %, so it will help us display all our HTML elements in the proper responsive format.

Max-width:100%;

Copy after login

5. Responsive Text: Same as another element, it is necessary to make text also responsible in all devices as per their screen size. It can be set by using VW, which helps the user set the viewport width to adjust the text size as per the device screen easily. This syntax explains that viewport is referred to as the browser display size. Here 1 VW is equal to the actual 1 % of the viewport width.

<h4 style="font-size:5vw">Text</h4>

Copy after login

6. Using Media Queries: Media queries play an important in responsive designing to make text, image, and other elements more responsive for different device sizes for different browsers sizes. There are different frameworks available nowadays to make our webpage more responsive. They are like:

Responsive Stylesheet: this framework helps us to use different stylesheets frameworks like W3.CSS, which takes the main role while creating a responsive design. By default, it supports to mobile-first design. It is easy to learn & develop.
Bootstrap: It is the most popular framework that is growing rapidly and available freely to the user. It is more user-friendly than other frameworks because it’s based on web development languages like HTML, CSS, and jquery, which helps to make web pages more responsive.
Latest Responsive CSS: It supports various kinds of browsers as well as all types of devices like smartphones, tablets, laptops, etc.

Examples of Implementing Responsive in HTML

Below are the examples of Responsive in HTML.

Example #1

In this example, we are setting viewport in the HTML code and also made the image responsive.

HTML Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Design by setting Viewport</h2>
<p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p>
<img src="images.jpg" >
</body>

Copy after login

Output on Desktop or Laptop Screen:

Responsive in HTML

Output on Mobile Devices:

Responsive in HTML

Output on Tablet:

Responsive in HTML

Example #2

In Example 2, we are making the screen responsive using media queries. That will help us to make webpages responsive by supporting various browsers as well as on various devices too by using code:

HTML Code:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>
</head>
<body>
<h2>Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4>First Content Part</h4>
<img src="images.jpg">
</div>
<div class="middle">
<h4>Second Content Part</h4>
<img src="images.jpg">
</div>
<div class="bottom">
<h4>Third Content part</h4>
<img src="images.jpg">
</div>
</body>

Copy after login

Output on Desktop View:

Responsive in HTML

Output on Mobile Devices: Into the mobile device, the output screen will be scrollable so to see the whole webpage, we have to scroll down on the screen.

Responsive in HTML

Output on Tablet Device: The same output will be get adjusted as Per Tablet Device Size.

Responsive in HTML

Example #3

Let’s see another Example 3 using bootstrap, Standard CSS and media queries:

HTML Code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2>WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>
</body>
</html>

Copy after login

Output on Laptop Screen:

Responsive in HTML

Output on Mobile Devices:

Responsive in HTML

Output on Tablet:

Responsive in HTML

Conclusion

Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.

The above is the detailed content of Responsive in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn