How to set the font of text relative to screen resolution

Question

<!DOCTYPE html>
<html>
<head>
<title>Algoranker</title>
<style type="text/css">
div.top{
  width:100%;
  height:10%;
  text-align: center;
  color: white;
  background-color: #474747;
}
p{
  margin-top: 0px;
}
html,body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body >
<div class="top" >
<p>Testing</p>
</div>
</body>
</html>

How to i make the Testing text in p tag to vary according to screen resolution i tried using font-size:10%, but not changing, any one suggest me a method

score 3 · Accepted Answer · answered Jul 21 '15 at 03:11

3

If you want it to resize according to the screen width, I'd suggest the vw unit.

Fiddle: https://jsfiddle.net/tey035zv/

answered Jul 21 '15 at 03:11

gopalraju

2,299
1
12
15

Nice call with the `vw` unit. My only concern would be browser support, which is still a bit weak, especially in IE and mobile. – Michael Benjamin Jul 21 '15 at 03:50
It supports IE9 and above and all modern browsers. Another crossbrowser solution will be http://fittextjs.com/ - a js based solution. – gopalraju Jul 21 '15 at 06:52

score 1 · Answer 2 · answered Jul 21 '15 at 05:42

1

hi i would like to suggest you this link to refer just because this supports responsive-ness

i believe to use this

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

just apply

 font-size : 5vw;

answered Jul 21 '15 at 05:42

Himesh Aadeshara

2,114
16
26

How to set the font of text relative to screen resolution

2 Answers2