網頁響應式控制文字放大所小方法

2023-08-15 229 words 2 minutes

https://user-images.githubusercontent.com/6058558/260744150-12b69138-c39c-4ccb-ba7a-03a6b62d6e95.png

Contents

很久沒寫前端相關文章，最近看到文字可以用 vw 控制放大縮小，這邊也有興趣了解，這邊簡單做個測試順便筆記。

傳統 JS 方法控制大小

以前我找到用 JS 依照文字大小控制，這邊有找到這個範例。

Set Font Size Based On Word Count | CSS-Tricks - CSS-Tricks

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


$(function() {

    var $quote = $(".post p:first");
    
    var $numWords = $quote.text().split(" ").length;
    
    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $quote.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $quote.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $quote.css("font-size", "24px");
    }
    else {
        $quote.css("font-size", "20px");
    }    
	
});

文字響應式控制大小

以下內容擷取用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字內容，建議看裡面教學。

vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。

使用可用min,max搭配vw使用。太久沒寫 CSS 都忘記還能這樣做。

1
2
3
4


h1,.h1{
  font-size: 24px; /* for IE */
  font-size: min(max(3.5vw, 16px), 40px);
}

而第二個 font-size 的意思是字體大小 3.5vw、最小值 16px、最大值 40px。是不是比使用 media query 解決還乾淨多了？

但你嘗試會發現這邊無法針對文字去做放大縮小設定。實際上目前 CSS 無法做到文字長度判斷，所以只能還是由 JavaScript 控制，但是你沒有依照文字長度大小調整的話，可以用用看這個方法。

實作文字大小調整

之前我做的我的動畫清單有些新番名稱太長了，但我那時候沒調整，最近突然想到就稍微調整一下。

調整後

GIT: 標題字型調整 · malagege/vue-myanimelist@dd66143

算出中文調整

中文跟英文單字長度不一樣，這邊我們把中文算2字元，簡單算出縮小文字長度。

參考:String Length 中文字串長度

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function stringBytes(c){
  var n=c.length,s;
  var len=0;
  for(var i=0; i <n;i++){
   s=c.charCodeAt(i);
   while( s > 0 ){
      len++;
      s = s >> 8;
   }
  }
  return len;
}

其他方法可看利用Byte單位來計算字串長度的幾種做法(Javascript,C#,VB.Net) | F6 Team - 點部落

彩蛋

如何使用 Flexbox 完美實現文字的中心對齊

之前 Flex 和 Grid 細節設定都忘光光了，哈哈。但看文件還是可以改。