{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 甜甜的少女心 的问题《Scaling font size with screen size?》','https://www.manongdao.com/q-845503.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm developing a web app with AngularJS 1.x and Angular Material. I'm trying to create a landing page with a large title at md-display-4.
Here's what it looks like:
As you can see, the title fills the page nicely and fits in one line.
However, this is on a 1680x1050 monitor. If I move the browser window to my smaller 1366x768 monitor, I get this instead:
As you can see, the font stays the same physical size and overruns to the next line, and also is no longer centred.
How can I ensure a consistent look where font scales depending on screen size?
Here's my code:
<html>
<head>
<title>FOOBY DOOBY</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="styles.css" />
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="homePage">
<div layout="column">
<div layout layout-align="center">
<h1 class="md-display-4">FOOBAR IS THE TITLE HERE</h1>
</div>
<div>
<!-- Description here -->
</div>
</div>
</body>
</html>
You can use viewport units, for example:
Browser support reference
Take a look into CSS media queries. It will give you the control you need over the font in relation to screen size.
You can add to bootstrap's exisiting classes to modify the font size depending on screen width.
Viewport units make the browser's zoom inactive. But If you're willing to give it a shot you could resize fonts proportionally to the screen size by:
document.documentElement.style.fontSize = x + 'rem';document.documentElement.clientWidthIf you don't want to fight with that, I've built a small library that properly handles font-scalling for all relative browsers IE9+.
I think this kind of dynamic font size would be best defined using in css. Found this great example from youtube by Mike Riethmuller. https://www.youtube.com/watch?v=S8xSbtDySHE
How to do it is explained at 14:20.
The result is shown on 18:00.
What he basically does is defining font-size using calc and vw:
When the screen is >=800px wide the max font-size is used. When screen size is less than 800px the font size gradually gets closed to min font-size until screen width is 400px.