How to use percentage for font in different screen sizes
I have the following DIVs:
<div class="tckLeftHolder">
<div class="tckLeftContents">
<span>URGENT CARE WAIT</span>
</div>
</div>
CSS
.tckLeftContents
{
text-align: center;
width: 90%;
padding: 0 0 0 10%;
height: 35px;
overflow: hidden;
}
.tckLeftHolder
{
float: left;
width: 25%;
height: 35px;
line-height: 17px;
vertical-align: middle;
background: #EA7C30;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
color: #FFFFFF;
font-family: Verdana;
font-size: 10px;
overflow: hidden;
text-align: center;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
Displays this in different screen sizes:
How to make the font responsive so that the size increases / decreases depending on the screen.
Update:
CSS
@media (min-width: 500px) and (max-width: 860px)
{
.tckLeftContents
{
font-size: 1vmin;
}
}
+3
source to share
2 answers
You can use view units that depend on the specific container size (width and / or height).
{
font-size: 1vmin;
}
Possible values:
- vw - relative to viewport width
- vh - relative to the height of the viewport
- vmin - relative to the width or height of the viewport (whichever is smaller)
- vmax - relative to the width or height of the viewport (whichever is larger)
Check out the W3 docs on Viewport Relative Lengths , which says:
Percentage lengths in the viewport are relative to the size of the original containing block. When the height or width of the original containing block changes, they are scaled accordingly.
+4
source to share