There are various ways of putting some text in a container and having some size to fill that container.
There are different methods such as using CSS and jQuery which are explained below.
Using CSS property (Viewport width): The vw is a CSS property, to create responsive typography in the HTML file. The viewport is a browser window size. The “text-size” can be set with a “vw” units and you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize the browser window.
1vw = 1% of viewport width. If the viewport is 100cm wide, 1vw is 10cm.
Example:
<!DOCTYPE html> <html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to change font size
depending on the width
of container?
</title>
<style>
h1 {
font-size: 8vw;
color: green;
font-weight: bold;
}
p {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Resize the browser window
to see how the font size
changes.
</p>
</body>
</html>
|
Output:
-
On Desktop:
- On iPad:
Using CSS property (Media Queries): You can also use media queries to change the font size of an element on specific screen sizes. The @media rule, which makes it possible to define different style rules for different media types.
Example:
<!DOCTYPE html> <html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
How to change font size
depending on width of
container?
</title>
<style>
h1 {
color: green;
}
@media screen and (min-width: 601px) {
h1 {
font-size: 80px;
}
p {
font-size: 40px;
}
}
@media screen and (max-width: 600px) {
h1 {
font-size: 40px;
}
p {
font-size: 20px;
}
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Set the <em>font-size</em> of "h1"
to "40px" and <em>paragraph</em> to
"20px", when the window's width is
"600px" wide or less and when it
is "601px" or wider, set the
<em>font-size</em> to "80px" and
<em>paragraph</em> to "40px".
Resize the browser window to
see the effect.
</p>
</body>
</html>
|
Output:
-
On Desktop:
-
On iPad:
Using FitText jQuery plugin: There is a jquery plugin that can make font-sizes flexible on the responsive layout, namely FitText. For instance, one can use the plugin to do scalable text sizes with respect to the container’s width.
Example:
<!DOCTYPE html> <html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>H
ow to change font size
depending on width of c
ontainer?
</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
Resize the browser window
to see how the font size
scales.
</p>
<script type="text/javascript" src=
</script>
<script type="text/javascript">
textFit(document.querySelector("h1"));
</script>
</body>
</html>
|
Output:
-
On Desktop:
-
On iPad:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.