如何根據窗口寬度增加字體大小？

Question

我正在創建一個基於網絡的應用程序，將在電視和其他大型顯示器上顯示。 我想要一種快速簡便的方法來增加字體大小以適應窗口大小。 文字是動態的。

任何幫助是極大的贊賞。 ;）

Answer 1

如果您對CSS3感興趣/能夠使用CSS3，那么就有一個純CSS解決方案 - 媒體查詢 >> http://www.w3.org/TR/css3-mediaqueries/

例如，CSS：

@media screen and (min-device-width: 800px) { ... }

...允許您在800px或更高屏幕上顯示時為頁面指定不同的樣式。 顯然你可以隨心所欲地改變它 - 強大的東西

您可能還想在此鏈接的末尾考慮預先編寫的javascript ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 2

好的 - 對於初學者，您應該使用Ems進行盡可能多的測量，就像在UI中一樣。 至少，使用Ems（而不是像素或％）來調整所有文本元素的大小。 如果可能，在Ems中設置布局塊的寬度將有助於應用程序按比例縮放。 如果您可以在Ems中設置所有維度，那么整個應用程序將在視覺上可擴展。

Ems的關鍵在於它們的大小相對於其父元素的字體大小 - 這意味着您可以通過調整body元素的字體大小來調整所有文本的大小（因為所有內容都相對於身體）。

最后一步是使用一段javascript來檢測視口的寬度，並相應地設置主體的字體大小。 根據您希望控制比例的細粒度，您可以使用body元素上的類來設置一組預定義的值，也可以直接操作font-size本身。 如果可能的話，我傾向於使用預先確定的尺寸來使測試更容易。

我使用javascript庫來更容易地檢測視口寬度 - 在不同的瀏覽器中它是眾所周知的不同。 使用jQuery，代碼可能如下所示：

$(function(){
  var viewPortWidth = $(window).width();

  if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
  else if (viewPortWidth > 1400) {$('body').addClass('wide')}
  else if (viewPortWidth > 1000) {$('body').addClass('standard')}
  else if (viewPortWidth > 700) {$('body').addClass('narrow')}
  else {$('body').addClass('extraNarrow')}

});

而CSS：

<style type="text/css">

  body {font-size:62.5%;}  /* Set the size of 1em to 10px in all browsers */

  body.extraWide {font-size:85%;}
  body.wide {font-size:75%;}

  body.narrow {font-size:50%;}
  body.extraNarrow {font-size:40%;}

</style>

當然，您可以調整這些值，並且可以根據需要設置多個分區。 這是一個快速而又骯臟的解決方案，但應該做到這一點。

注意 - 顯示的javascript代碼只會在頁面加載時設置一次 - 當您更改窗口大小時，它不會調整它。 這是一個可能的補充，但在開始追蹤這條賽道之前還有更大的考慮因素。 就個人而言，我甚至考慮在cookie中設置比例值，以保持用戶在整個會話期間的體驗一致，而不是在每個頁面加載時重新縮放。

Answer 3

japanFour提供的解決方案的更好版本（對我來說）：

$(document).ready(scaleFont);
$(window).resize(scaleFont);


function scaleFont() {

  var viewPortWidth = $(window).width();

  if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');}
  else if (viewPortWidth >= 1400) {$('body').attr('class','wide');}
  else if (viewPortWidth >= 1000) {$('body').attr('class','');}
  else if (viewPortWidth >= 700) {$('body').attr('class','narrow');}
  else {$('body').attr('class','extraNarrow');}
}

因此，只有在調整窗口大小（避免setTimout ）時才會調整大小，並且只為body所需的確切類

Answer 4

我在一個相當古老的問題中知道這一點，但無論如何我都會回答，因為這是一個可以被大量搜索的問題。

實際上除了Media Queries之外還有另一種方法，它也是純CSS：

---

視口單位： vw ， vh ， vmin ， vmax 。

這些長度單位表示視口寬度（vw），高度（vh）的視口大小的1％，兩者中的較小者（vmin）或兩者中的較大者（vmax）。

例如，您可以使用：

CSS：

body {
    font-size:5vmin;
}

這會將整個文檔的字體大小設置為最小視口大小（寬度或高度）的5％。 因此，例如在iPad（1024 x 768像素）上， font-size將為38,4 px （768 px的5％，因為這是視口大小的最小尺寸） 。

瀏覽器兼容性： https ： //caniuse.com/#feat=viewport-units

Answer 5

這將是我的方法（刪除實際的類+ Drupal 7 jQuery）：

(function ($) {
$(document).ready(function() {


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile');

function setBodyClass(){
  // remove previous classes
  for(x in bodyClassArr){
      if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); }
  }
  var viewPortWidth = $(window).width();
  if (viewPortWidth > 1900) { $('body').addClass('extraWide'); }
  else if (viewPortWidth > 1400) { $('body').addClass('wide'); }
  else if (viewPortWidth > 1000) { $('body').addClass('normal'); }
  else if (viewPortWidth > 700) { $('body').addClass('narrow'); }
  else if (viewPortWidth < 700) { $('body').addClass('mobile'); }
  else { $('body').addClass('normal'); }
};
setBodyClass();

$(window).resize(function() { setBodyClass(); });

}); // jquery end
}(jQuery));

Answer 6

以下代碼有什么問題嗎？ 雖然我同意媒體查詢非常有用，但我想在窗口增長或縮小時不斷縮放頁面某些元素的字體大小。 這個代碼似乎比基於視口像素寬度建立類常量的其他jquery解決方案簡單得多：

$(document).ready(function() {

  var setFontSize = function() {
    var viewportWidth = $(window).width();
    var fontSize = Math.sqrt(viewportWidth/250);
    $('.myElement').css('font-size',fontSize+'em');
  };

  $(window).resize(function() {
    setFontSize();
  });

  setFontSize();

});

Answer 7

Beejamin的答案按預期工作，我添加了一個設置超時，因此它會實時擴展。 但它並沒有扭轉規模。

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
      else if (viewPortWidth > 1400) {$('body').addClass('wide')}
      else if (viewPortWidth > 1000) {$('body').addClass('standard')}
      else if (viewPortWidth > 700) {$('body').addClass('narrow')}
      else {$('body').addClass('extraNarrow')}

      setTimeout(scaleFont, 100); 
    }

編輯：解決逆轉效應

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')}
      else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')}
      else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')}


      setTimeout(scaleFont, 100); 
    }

Answer 8

這是一個更簡單，沒有jquery的解決方案：

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}