Question

我有一个快速响应的网站。它在全屏和移动设备尺寸（桌面或手机）上运行良好但是当我改变浏览器窗口的大小时，一些文本（大多数是h1，h2 ..大小）与下一个文本交错。它也发生在低分辨率屏幕上。您可以在这两个屏幕截图中看到我的意思：

我想动态更改字体大小，如果可能的话只针对某些特定的div。
可能吗？怎么样？

fiddle is here
代码：

<div class="row">
    <div class="col s12 m3">
            <div class="card">
                <div class="card-image"  style="height: 227.25px;">
                    <div  id="dash_kullanicisayisi"  class="card-action  inside">
                        <h1 class="center-align"style="font-size:100px; font-weight:lighter">125</h1>
                    </div>
                </div>
                <div class="card-content grey lighten-3">
                    <span class=" card-title activator grey-text text-darken-4">Online kullanıcı </span> 
                    <p>Online</p>
                </div>
            </div>
        </div>

<div class="col s12 m3">
 <div class="card">
                <div class="card-image "  style="height: 227.25px;">


                    <div class="row valign-wrapper blue-text darken-4">
                        <div id="dash_max_in" class="col s10 push-s2">
                            <h1 class="valign right-align    red-text accent-4 " style="margin: 1.35rem 10px 0px 0px;">43.56</h1>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign"><h5 class="valign red-text accent-44" style="margin-left:10px"> Download </h5></span>
                        </div>
                    </div>

                    <div class="row valign-wrapper">
                        <div id="dash_max_out" class="col s10 push-s2">
                            <h1 class="valign right-align  indigo-text darken-4 " style="margin-right: 10px; margin-bottom: 0.68rem; margin-top: 0.68rem;">13.25</h1>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign  indigo-text darken-4"><h5 class="valign" style="margin-left:10px"> Upload </h5></span>
                        </div>
                    </div>

                </div>
                <div class="card-content grey lighten-3">
                    <span class="card-title activator grey-text text-darken-4">Maximum<i class="material-icons right tooltipped"  data-position="bottom" data-delay="50" data-tooltip="Yoğunluk için tıklayınız">more_vert</i></span>
                    <p>Günlük averaj</p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Maximum yoğunluk<i class="material-icons right tooltipped"  data-position="top" data-delay="50" data-tooltip="Yoğunluk için tıklayınız">close</i></span>
                    <div class="row valign-wrapper blue-text darken-4" style="margin-left: -1.5rem; margin-right: -0.5rem;">
                        <div id="dash_max_in" class="col s10 push-s2">
                            <h2 class="valign right-align  red-text accent-4" style="margin-right:-1rem;margin-left:-1.5rem">25.25</h2>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign"><h5 class="valign  red-text accent-4" style="margin-left:0px"> Download </h5></span>
                        </div>
                    </div>
                    <div class="row valign-wrapper indigo-text darken-4" style="margin-right:-1rem;margin-left:-1.5rem">
                        <div id="dash_max_out" class="col s10 push-s2">
                            <h2 class="valign right-align indigo-text darken-4" style="margin-left: -1.5rem; margin-right: -0.5rem; margin-bottom: 0.68rem; margin-top: 0.68rem;">20.22</h2>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign"><h5 class="valign" style="margin-left:10px"> Upload</h5></span>
                        </div>
                    </div>
                </div>
             </div>
     </div>
     </div>

Answer 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>Font resize</title>
<style>
body {
    font-size:16px;
}
h1 {
    font-size:3.125em;
}
h2 {
    font-size:1.875em;
}
 @media screen and (max-width: 768px) {
 body {
font-size:13px;
}
}
 @media screen and (max-width: 640px) {
 body {
font-size:12px;
}
}
 @media screen and (max-width: 480px) {
 body {
font-size:11px;
}
}
</style>
</head>

<body>
<h1>Font Resize</h1>
<h2>Font Resize</h2>
</body>
</html>

Answer 2

有几种方法可以执行此操作...您可以考虑将em用于字体大小（http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/）

但可能更喜欢使用媒体查询，这是一种调整每个屏幕大小的CSS的非常有用的方法。（your fiddle adjusted）例如：

h1
{
  font-size: 18px;
}
/*to change font on screens 800px wide and smaller*/
@media screen and (max-width: 800px)
{
  h1
  {
    font-size: 14px;
  }
}
/*to change font on screens 500px wide and smaller*/
@media screen and (max-width: 500px)
{
  h1
  {
    font-size: 12px;
  }
}

动态更改字体大小

2 个答案: