Изменить размер шрифта динамически

У меня есть отзывчивый веб-сайт. Он отлично работает в полноэкранном и мобильном устройстве (на рабочем столе или на телефоне)
Но когда я изменяю размер окна браузера, некоторые тексты (в основном h1, h2 .. размеры), чередующиеся со следующим текстом. Это происходит и при экранах с низким разрешением. Вы можете увидеть, что я имею в виду в этих двух скриншотах:

Я хочу, чтобы изменить размер шрифта динамически, если это возможно только для некоторых конкретных див.
Возможно ли это? Как?
Изменить размер шрифта динамически

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>

источник

2016-06-24 TFC

Вы должны лучше разместить код или скрипку или ссылку в реальном времени. Без них никто не сможет помочь. –

Вы можете использовать единицы просмотра, такие как 'vw' для ширины и' vh' для высоты. Попробуйте прочитать https://css-tricks.com/viewport-sized-typography/ – rmondesilva

Позвольте мне попробовать. beakause есть некоторые динамические данные поступают из php – TFC

<!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>

источник

2016-06-24 06:37:47 Nehemiah

ничего не изменит на моей странице – TFC

Несколько способов сделать это ... Вы могли бы рассмотреть вопрос об использовании им, для размера шрифта (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; 
    } 
}

источник

2016-06-24 19:39:03 deebs

Лучше выглядите скрипку: https://jsfiddle.net/7cqa5cs7/ – deebs

Изменить размер шрифта динамически

ответ

Смежные вопросы