How to create a responsive font in css ( without @media )
In Responsive website design big problem to create font responsive.
Responsive Font is many way you can create it.
In this tut. I am learning create a responsive font without using @media attribute.
Now Show Example Html file is :
<html>
<head>
<title>krButani</title>
<style>
.FDemo
{
margin : 30px;
padding:20px;
font-size:5vw;
/*
offset You can set View port
the view port type is Follow :
1. vw = viewport width
2. vh = viewport height
3. vmin = relative to the shortest dimention( width or height )
4. vmax = relative to the logest dimention( width or height )
one other dimention is rem ( Re embedded )
It's all the dimension can not support internet explorer.
*/
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#54A93F;
border:3px solid #fff;
box-shadow:0px 0px 3px #999;
border-radius:5px;
}
</style>
</head>
<body>
<div class="FDemo">
This Is Text Demo
</div>
</body>
</html>
Output Is :
Responsive Font is many way you can create it.
In this tut. I am learning create a responsive font without using @media attribute.
Now Show Example Html file is :
<html>
<head>
<title>krButani</title>
<style>
.FDemo
{
margin : 30px;
padding:20px;
font-size:5vw;
/*
offset You can set View port
the view port type is Follow :
1. vw = viewport width
2. vh = viewport height
3. vmin = relative to the shortest dimention( width or height )
4. vmax = relative to the logest dimention( width or height )
one other dimention is rem ( Re embedded )
It's all the dimension can not support internet explorer.
*/
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#54A93F;
border:3px solid #fff;
box-shadow:0px 0px 3px #999;
border-radius:5px;
}
</style>
</head>
<body>
<div class="FDemo">
This Is Text Demo
</div>
</body>
</html>
Output Is :
Size of : 1024 * 768
Size of : 320 *240
Comments
Post a Comment