CSS'de duyarlı yazı tipi boyutu

Zurb Foundation 3 ızgarasını kullanarak bir site oluşturdum . Her sayfanın büyük bir boyutu vardır h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Tarayıcıyı mobil boyutuna göre yeniden boyutlandırdığımda büyük yazı tipi ayarlanmaz ve tarayıcının büyük metne uyum sağlamak için yatay bir kaydırma içermesine neden olur.

Zurb Foundation 3 Tipografi örnek sayfasında , başlıkların tarayıcıya sıkıştırıldığından ve genişletildiğinden uyarlandığını fark ettim .

Gerçekten bariz bir şeyi mi kaçırıyorum? Bunu nasıl başarabilirim?

font-sizeTarayıcı penceresi boyutlandırma zaman böyle yanıt vermez. Bunun yerine, tarayıcıdayken klavyede Ctrlve tuşlarına +birlikte basmanız gibi tarayıcı yakınlaştırma / tür boyutu ayarlarına yanıt verirler .

Medya sorguları

Yazı tipi boyutunu tasarımınızı kırmaya ve kaydırma çubukları oluşturmaya başladığı belirli aralıklarla küçültmek için medya sorguları kullanmaya bakmanız gerekir .

Örneğin, bunu tasarımınızın kırılmaya başladığı yer için 320 piksel genişliğini değiştirerek en alttaki CSS'nizin içine eklemeyi deneyin:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Görünüm yüzdesi uzunlukları

Ayrıca kullanabilirsiniz görüntü alanı yüzdesi uzunlukları gibi vw, vh, vminve vmax. Bu durumlar için resmi W3C belgesi:

Görünüm yüzdesi uzunlukları, ilk içeren bloğun boyutuna göredir. İlk içeren bloğun yüksekliği veya genişliği değiştirildiğinde, bunlar uygun şekilde ölçeklenir.

Yine, aynı W3C belgesinden her bir ünite aşağıdaki gibi tanımlanabilir:

vw birimi - İlk içeren bloğun genişliğinin% 1'ine eşittir.

vh unit - İlk içeren bloğun yüksekliğinin% 1'ine eşittir.

vmin ünitesi - vw veya vh'nin kük olanına eşittir.

vmax birimi - vw veya vh büyüklüğüne eşittir.

Ve diğer CSS değerleriyle tamamen aynı şekilde kullanılırlar:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Burada görüldüğü gibi uyumluluk nispeten iyidir . Ancak, Internet Explorer ve Edge'in bazı sürümleri vmax'ı desteklemez. Ayrıca, iOS 6 ve 7'de iOS 8'de düzeltilen vh birimi ile ilgili bir sorun var.

EMS, px veya pts yerine görünüm değerini kullanabilirsiniz:

1vw = görünüm genişliği% 1

1vh = görünüm yüksekliğinin% 1'i

1vmin = 1vw veya 1vh, hangisi daha küçükse

1vmax = 1vw veya 1vh, hangisi daha büyükse

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

CSS-Tricks'ten: Viewport Boyutlu Tipografi

Bu sorunun üstesinden gelmenin yolları ile oynuyorum ve bir çözüm bulduğuma inanıyorum:

Internet Explorer 9 (ve üstü) ve CSS calc (), rem birimleri ve vmin birimlerini destekleyen tüm diğer modern tarayıcılar için uygulamanızı yazabiliyorsanız. Medya sorguları olmadan ölçeklenebilir metin elde etmek için bunu kullanabilirsiniz:

body {
  font-size: calc(0.75em + 1vmin);
}

İşte burada: http://codepen.io/csuwldcat/pen/qOqVNO

mediaDuyarlı stil için CSS belirteçlerini ([zurb] kullandıkları şey) kullanın:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Bir jQuery çözümü kullanmak sakıncası yoksa TextFill eklentisini deneyebilirsiniz

jQuery TextFill, metni bir kaba sığacak şekilde yeniden boyutlandırır ve yazı tipi boyutunu olabildiğince büyütür.

https://github.com/jquery-textfill/jquery-textfill

Bunu başarmanın birkaç yolu vardır.

Bir medya sorgusu kullanın , ancak birkaç kesme noktası için yazı tipi boyutları gerektirir:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

% Veya em cinsinden boyutlar kullanın . Sadece temel yazı tipi boyutunu değiştirin ve her şey değişecektir. Bir öncekinden farklı olarak, her seferinde h1 değil, gövde yazı tipini değiştirebilir veya temel yazı tipi boyutunun cihazın varsayılanı ve geri kalanının tümünde olmasını sağlayabilirsiniz em:

1. “Ems” (em) : “em” ölçeklenebilir bir birimdir. Bir em geçerli yazı tipi boyutuna eşittir, örneğin, belgenin yazı tipi boyutu 12 pt ise, 1 em 12 pt'ye eşittir. Ems doğada ölçeklenebilir, bu nedenle 2 em 24 pt, .5 em 6 pt, vb.
2. Yüzde (%) : Yüzde birimi "em" birimine çok benzer, birkaç temel fark için tasarruf edin. Her şeyden önce, mevcut yazı tipi boyutu% 100'e eşittir (yani 12 pt =% 100). Yüzde birimini kullanırken metniniz mobil cihazlar ve erişilebilirlik için tamamen ölçeklenebilir durumda kalır.

Bkz. Kyleschaeffer.com / ....

CSS 3 , görünüm bağlantı noktasına göre yeni boyutları destekler. Ancak bu Android'de çalışmaz:

1. 3.2vw = görüş alanının genişliğinin% 3.2'si
2. 3,2 vh = görüntü yüksekliğinin% 3,2'si
3. 3.2vmin = 3.2vw veya 3.2vh daha küçük

4. 3.2vmax = 3.2vw veya 3.2vh daha büyük

   body
   {
       font-size: 3.2vw;
   }

CSS-Tricks'e bakın ... ve ayrıca Kullanabilir miyim'e bakın ...

Rem birimleri kullanarak duyarlı yazı tipi boyutlarına başka bir yaklaşım daha var.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Daha sonra medya sorgularında, temel yazı tipi boyutunu değiştirerek tüm yazı tipi boyutlarını ayarlayabilirsiniz:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Bunun Internet Explorer 7 ve Internet Explorer 8'de çalışması için px birimleri içeren bir yedek eklemeniz gerekir:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Less ile gelişiyorsanız , sizin için matematiği yapacak bir mixin oluşturabilirsiniz.

Rem birimleri desteği - http://caniuse.com/#feat=rem

"Vw" çözümü çok küçük ekranlara giderken bir sorun yaşıyor. Taban boyutunu ayarlayabilir ve oradan calc () ile yukarı çıkabilirsiniz:

font-size: calc(16px + 0.4vw);

Bu kısmen vakıf 5'te uygulanmaktadır.

_Type.scss dosyasında iki başlık değişkeni vardır:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Orta seviye için, ilk değişken grubuna göre boyutlar oluştururlar:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

Ve varsayılan - küçük ekranlar için, CSS oluşturmak için ikinci bir değişken kümesi kullanırlar:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

İlgili ekran boyutları için yazı tipi boyutlarını ayarlamak üzere bu değişkenleri kullanabilir ve özel scss dosyanızda geçersiz kılabilirsiniz.

Duyarlı bir yazı tipi boyutu FlowType adı verilen bu JavaScript koduyla da yapılabilir :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Duyarlı web tipografisi en iyi şekilde: öğe genişliğine dayalı yazı tipi boyutu.

Veya FitText adlı bu JavaScript kodu :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Yazı tipi boyutlarını esnek hale getirir. Başlıklarınızın oran tabanlı yeniden boyutlandırılması için duyarlı tasarımınızda bu eklentiyi kullanın.

Bir oluşturma aracı kullanıyorsanız, Rucksack'i deneyin.

Aksi takdirde, minimum ve maksimum yazı tipi boyutlarını ( demo ) gibi kolayca kontrol etmek için CSS değişkenlerini (özel özellikler) kullanabilirsiniz :

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

CSS-Tricks'ten harika bir makale gördüm . Sadece iyi çalışıyor:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Örneğin:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

line-heightTarayıcıda da değişmesi için aynı denklemi mülke uygulayabiliriz .

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Sadece öğe başına yazı tipi boyutunu tanımlamanız gereken bir fikir bulmuştum, ancak yine de medya sorgularından etkileniyor.

İlk olarak, medya sorgularını kullanan görünüme bağlı olarak "--text-scale-unit" değişkenini "1vh" veya "1vw" olarak ayarladım.

Sonra yazı tipi boyutu için calc () ve çoklayıcı numaramı kullanarak değişkeni kullanın:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

Örneğimde yalnızca görünümün yönelimini kullandım, ancak ilke herhangi bir medya sorgusu ile mümkün olmalıdır.

jQuery "FitText" muhtemelen en iyi yanıt veren başlık çözümüdür. GitHub'da kontrol edin: https://github.com/davatron5000/FitText.js

Birçok çerçevede olduğu gibi, "şebekeden çıkın" ve çerçevenin varsayılan CSS'sini geçersiz kıldığınızda, işler sola ve sağa kırılmaya başlayacaktır. Çerçeveler doğal olarak rijittir. Zurb'in varsayılan H1 stilini varsayılan ızgara sınıflarıyla birlikte kullanacaksanız, web sayfası mobilde düzgün şekilde görüntülenmelidir (yani, duyarlı).

Ancak, çok büyük 6.2em başlıkları istediğiniz anlaşılıyor, bu da dikey modda bir mobil ekranın içine sığması için metnin küçültülmesi gerektiği anlamına geliyor. En iyi seçeneğiniz FlowType ve FitText gibi duyarlı bir metin jQuery eklentisi kullanmaktır . Hafif bir şey istiyorsanız, Ölçeklenebilir Metin jQuery eklentime göz atabilirsiniz:

http://thdoan.github.io/scalable-text/

Örnek kullanım:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Gerçek orijinal olarak Sass (değil SCSS) otomatik paragraf en ve tüm başlıkların ayarlamak için Mixins aşağıda kullanabilirsiniz font-size.

Sevdim çünkü çok daha kompakt. Ve yazmak daha hızlı. Bunun dışında aynı işlevselliği sağlar. Her neyse, hala yeni sözdizimine (scss) bağlı kalmak istiyorsanız, Sass içeriğimi burada scss'ye dönüştürmekten çekinmeyin: [ BURAYI SCSS'E DÖNÜŞTÜRÜN]

Aşağıda size dört Sass karışımı veriyorum. Ayarlarını ihtiyaçlarınıza göre ayarlamanız gerekecektir.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Ayarlarla oynamayı bitirdikten sonra, sadece bir mixin'i arayın - yani: + config-and-run-font-generator () . Daha fazla bilgi için aşağıdaki koda ve yorumlara bakın.

Sanırım üstbilgi etiketleri için yapıldığı gibi bir medya sorgusu için otomatik olarak yapabilirsiniz, ancak hepimiz farklı medya sorguları kullanırız, bu yüzden herkes için uygun olmaz. Önce mobil tasarım yaklaşımını kullanıyorum, bunu böyle yapardım. Bu kodu kopyalamaktan ve kullanmaktan çekinmeyin.

BU KARIŞIMLARI DOSYANIZA KOPYALAYIN ve YAPIŞTIRIN:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

TÜM KARIŞIMLARI İHTİYACINIZA YAPILANDIRIN - OYNAYIN! :) VE SONRA GERÇEK SASS KODUNUN ÜZERİNDE ARAYIN:

+config-and-run-font-generator()

Bu, bu çıktıyı üretecektir. Farklı sonuç grupları oluşturmak için parametreleri özelleştirebilirsiniz. Bununla birlikte, hepimiz farklı medya sorguları kullandığımız için, bazı karışımları manuel olarak düzenlemeniz gerekir (stil ve medya).

ÜRETİLEN CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Bu CSS sınıflarını kullanıyorum ve herhangi bir ekran boyutunda metin akışımı yapıyorlar:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Bunu başarmanın aşağıdaki yolları vardır:

1. Rem için örneğin 2.3 rem kullanın
2. Em için örneğin 2.3em kullanın
3. Örneğin% 2.3 için% kullanın. Ayrıca şunları kullanabilirsiniz: vh, vw, vmax ve vmin.

Bu birimler, ekranın genişliğine ve yüksekliğine bağlı olarak otomatik olarak boyutlandırılır.

Vw (görünüm alanı genişliği) olarak tanımladıysanız, yazı tipi boyutunu duyarlı hale getirebilirsiniz. Ancak, tüm tarayıcılar bunu desteklemez. Çözüm, tarayıcı genişliğine bağlı olarak temel yazı tipi boyutunu değiştirmek ve tüm yazı tipi boyutlarını% olarak ayarlamak için JavaScript kullanmaktır.

Duyarlı font boyutlarının nasıl yapılacağını açıklayan bir makale: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Bu çözümü buldum ve benim için çok iyi çalışıyor:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Hem masaüstü hem de mobil / tablette iyi görünmesi için metnin sorununu çözmenin bir yolu, metin boyutunu ekran PPI'sına (inç başına düşen nokta) bağlı olmayan fiziksel santimetre veya inç gibi fiziksel birimlere sabitlemektir.

Bu cevaba dayanarak, duyarlı bir yazı tipi boyutu için HTML belgesinin sonunda kullandığım kod aşağıdadır:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

Yukarıdaki kodda, tarayıcı / OS ekranının ÜFE'si için doğru yapılandırıldığı sürece, farklı bir sınıftaki öğelere fiziksel birimler halinde yazı tipi boyutları atanır.

Fiziksel birim yazı tipi, ekrana olan uzaklık normal olduğu sürece (kitap okuma mesafesi) her zaman çok büyük ve çok küçük değildir.

Metin boyutu bir vwbirim ile ayarlanabilir , yani "görüntü alanı genişliği". Bu şekilde metin boyutu tarayıcı penceresinin boyutunu izler:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Kişisel projem için vw ve @meida kullandım. Mükemmel çalışıyor.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Bu denklemi kullanın:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

1440 ve 768'den daha büyük veya daha küçük herhangi bir şey için, ona statik bir değer verebilir veya aynı yaklaşımı uygulayabilirsiniz.

Vw çözümünün dezavantajı, bir ölçek oranı ayarlayamamanızdır, diyelim ki 1440 ekran çözünürlüğünde bir 5vw 60px yazı tipi boyutu, fikir yazı tipi boyutunuz olabilir, ancak pencere genişliğini 768'e kadar küçülttüğünüzde, 12px olmak, istediğiniz minimal değil.

Bu yaklaşımla, üst sınırınızı ve alt sınırınızı ayarlayabilirsiniz ve yazı tipi kendi aralarında ölçeklenir.

Css'den calc () yöntemini kullanabiliriz

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Matematiksel formül kalk (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Korkarım yazı tipi yeniden boyutlandırma ile ilgili kolay bir çözüm yoktur. Bir ortam sorgusu kullanarak yazı tipi boyutunu değiştirebilirsiniz, ancak teknik olarak düzgün bir şekilde yeniden boyutlandırılmaz. Örneğin, şunu kullanırsanız:

@media only screen and (max-width: 320px){font-size: 3em;}

senin font-size300 piksel hem 3em olacak ve 200 piksel genişliği. Ama daha düşük bir şeye ihtiyacınız varfont-size mükemmel yanıt vermek için 200 piksel genişlik için süreye .

Peki, gerçek çözüm nedir? Sadece bir yol var. Metninizi içeren bir PNG görüntüsü (şeffaf arka plana sahip) oluşturmanız gerekir. Bundan sonra resminizi kolayca duyarlı hale getirebilirsiniz (örneğin: genişlik:% 35; yükseklik: 28 piksel). Bu şekilde metniniz tüm cihazlara tam olarak yanıt verecektir.

Birçok sonuçtan sonra bu kombinasyonu buldum:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

bunu dene

html { font-size: min(max(16px, 4vw), 22px); }

aldım https://css-tricks.com/simplified-fluid-typography/

İşte benim için işe yarayan bir şey. Sadece bir iPhone'da test ettim.

Eğer var olsun h1, h2ya da petiketler metin etrafında bu koyun:

<h1><font size="5">The Text you want to make responsive</font></h1>

Bu, masaüstünde 22 puntoluk bir metin oluşturur ve yine de iPhone'da okunabilir.

<font size="5"></font>