CSS, jQuery -- 動態調整網頁文字大小設計技巧

我們計設網頁時，都必須做一個非常全面的考慮，當字型考慮好了之後，然下來考慮文字的大小。文字對大家影響很大，太小看不清更，看起來吃力，太大又很奇怪，但你面對的使用者又是那種「一種米養百種人」的情況，這個說太大，那個說太小，怎麼辦？

那就要從最開始設計CSS時，就把文字大小的關係處理好，那接下來就可以很輕鬆搞定網頁上文字大小的問題。

基本這問題不難，先首第一步，必須利用CSS的「繼承」關係，由上而下繼承一個「主大小」，然後依各「元素」所需去自訂自己需要的大小，而非由各元素去各自自訂大小。

先看一個各元素去各自自訂大小的範例：

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 16px;
}

p {
  font-size: 14px;
}

以上這種各自玩各自的遊戲，盡量不要，現在是合作的社會，所以我們來玩繼承合作遊戲：

body {
  /* 一般都會選擇 small 或 medium為主大小；
     small約 12px; medium 約 14px;
  */
  font-size: small;
}

h1 {
  /* 12px * 200% 約 24px */
  font-size: 200%;
}

h2 {
  /* 12px * 160% 約 19px */
  font-size: 160%;
}

h3 {
  /* 12px * 120% 約 14px  */
  font-size: 120%;
}

p {
  /* 12 * 1.5 = 18px  */
  font-size: 1.5em;
}

經由body來設定為主要字型大小，讓以下所有元素去「繼承」這個字型大小的設定，需要改變時，只需要利用「%, 百分比」或「em, 倍」的用法，即可立即享受到繼承的好處，例如，使用者覺得字太小了點，你只需要將body中「font-size: small;」改為「font-size: medium;」那整個網頁就馬上會將字型放大，而且相關的元素也會立即跟著變更，而不用一個一個去調整。

再來，我想讓使用者去手動變更網頁上字型的大小，怎麼做？

jQuery -- 手動讓使用者動態調整網頁文字大小

這邊我透過jQuery示範：

$(function(){
 // 加上flag是為了讓文字有切換的效果
 var flag = false;
 // 在一個input上(id=click)註冊onclick事件
 $('#click').bind('click',function(){
  if (flag){
   $('body').css('font-size','medium');
   flag = false;
  }
  else {
   $('body').css('font-size','large');
   flag = true;
  }
 });
});

其實很簡單，我們只要透過修改body裡的css屬性，將font-size變更，網頁立即產生效果。

學會CSS中繼承關係，你也能有像Yahoo國際水準的功能哦！