我們在設計RWD 網頁時，常常會多個螢幕去測試字體大小問題，有時候在手機文字呈現時太小，在PC大螢幕時又太大。
一般來說在編寫 CSS 的時候，都習慣將網頁上的字體大小 font-size 使用 rem、em、px等單位，但是如果我們要寫 RWD 的情況時，在Pc上測試標題字看起來很舒適，但是一到手機版又會顯得太大。
em : 元素內父層定義的文字大小，em是相對於父層文字大小，例如：父層16px，5em 為 80px。
rem : 元素底層定義的文字大小，rem是相對於底層文字大小，例如：底層預設為20px，2rem為40px。
vw：viewport width 的縮寫。是相對螢幕寬度大小的百分比例。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。手機版414px 寬度時9vw就是414*9% = 37.26px。
如何使用vw
h1{font-size:2vw}
* 在pc 螢幕寬 1280px 時，字體大小為25.6px
* 在手機版寬 414px 時，字體大小為8.28px
0 意見
張貼留言