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國際水準的功能哦!

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。