可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

You can use viewport units, for example:

h1 {
    font-size: 10vw;
}

<h1>Foobar is the title here</h1>

Browser support reference

回答2:

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.

回答3:

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:

Using relative font units like em or rem
Then using javaScript to resize the root font size

document.documentElement.style.fontSize = x + 'rem';

x needs to scale to the window width, which is fairly simple to do using

document.documentElement.clientWidth

With the window resize event, but becomes a bit tricky when distinguishing between resizing the width and zooming, especially considering cross browser support, but it is doable if you focus on calculating the devicePixelRatio for all browsers.

If you don't want to fight with that, I've built a small library that properly handles font-scalling for all relative browsers IE9+.

回答4:

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:

font-size: calc($min-font-px + ($max-font - $min-font) * (100vw - $min-screen-px) / ($max-screen / $min-screen));
// example dimension from video -->
font-size: calc(16px + (24 -16) * (100vw - 400px) / (800 - 400));

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.