Responsive Texts
In this method, we set font sizes using %, vw, vh, etc. This ensures that text sizes are responsive, adjusting automatically until reaching a certain limit. Once the limit is reached, the content is justified to fit within the available width.
Example: This example demonstrates Responsive Web Design by making Responsive Texts.
<!DOCTYPE html>
<html>
<head>
<style>
body {
max-width: 100%;
}
.gfg {
font-size: 7vw;
font-weight: bold;
color: green;
text-align: center;
}
.geeks {
font-size: 5vw;
text-align: center;
}
p {
font-size: 3vw;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="geeks">HTML Introduction</div>
<p>
HTML stands for HyperText Markup Language. It is
used to design web pages using a markup
language. HTML is a combination of Hypertext and
Markup language. Hypertext defines the link
between web pages. A markup language is used to
define the text document within the tag which
defines the structure of web pages. This
language is used to annotate (make notes for the
computer) text so that a machine can understand
it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The
language uses tags to define what manipulation
has to be done on the text.
</p>
</body>
</html>
Output:
HTML Responsive Web Design
HTML Responsive Web Design is a smart way of designing web pages to look great on any device. It’s all about making HTML elements adjust themselves, like resizing or hiding, based on the device’s screen size. This ensures that no matter if someone’s using a phone, tablet, or computer, the web pages will always look good.
We will show you various examples of how to create an HTML responsive web design that adapts perfectly to different screen sizes.
Contact Us