用CSS的min() max() 與vw，設計有極限值的RWD響應式文字

在編寫CSS 的時候，你可能習慣將網頁上的字體大小(font-size) ... 而使用viewport width (vw) 當作字體大小的單位，就可以讓字體自動隨著視窗寬度的 ... 跳到主要內容 用CSS的min()max()與vw，設計有極限值的RWD響應式文字 取得連結 Facebook Twitter Pinterest 以電子郵件傳送 其他應用程式 作者： cjzopen - 2月05,2021 你是否有想過，能不能單靠CSS設計出會自動調整大小的ResponsiveFontSize？答案是可以的！ vw基本運用 極限問題 MediaQuery max()、min() Ifyoujustwantthebestsolution.plsclickthefourthitemofthelist（max()、min()）. 為何使用vw？ 在編寫CSS的時候，你可能習慣將網頁上的字體大小(font-size)使用rem、em、px等單位設定，但在講究RWD的情況下，甚至是GoogleSEO著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。

而使用viewportwidth(vw)當作字體大小的單位，就可以讓字體自動隨著視窗寬度的不同改變其大小。

各瀏覽器支援vw的情況 vw基本運用： vw是視窗寬度的百分比，所以1vw=1%的視窗寬度。

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

h1,.h1{ font-size:1.5vw; } 除了直接運用之外，也能搭配calc使用： h1,.h1{ font-size:calc(10px+1.5vw); } 極限問題（maxorminfontsize） 這是不管設計什麼東西都存在且必需要考慮的事情，vw也不例外。

設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以16px當作最小值。

所以，當視窗被拉到極大或極小的時候，以vw為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而mediaquery和min()、max()就出現在解決辦法的清單之中： MediaQuery 下面為使用的例子： h1,.h1{ font-size:3.5vw; } @media(min-width:1600px){ h1,.h1{ font-size:40px; } } @media(max-width:480px){ h1,.h1{ font-size:16px; } } 這樣子設定就能避免字體過大或過小，造成使用者體驗不佳的情況。

進階設定：使用max()min() 用mediaquery確實解決了問題，但實在是太麻煩了，光一個設定就多寫好幾行字，不如直接使用別的CSS語法min()、max()。

以下面的原始碼為例： h1,.h1{ font-size:24px; font-size:min(max(3.5vw,16px),40px); } 第一個font-size是確保瀏覽器(IE)不支援的話，還有一個基本設定。

而第二個font-size的意思是字體大小3.5vw、最小值16px、最大值40px。

是不是比使用mediaquery解決還乾淨多了？各瀏覽器支援clamp(),min(),max()的情況Sass與SCSS若平常習慣用Sass或SCSS編寫的話，要注意不能直接寫min或max，必需額外使用#{}把單字區隔開，否則會出現錯誤宣告。

h1,.h1{ font-size:m#{i}n(m#{a}x(9vw,2.5rem),5rem); } 這樣子的設定用了好一段時間，並沒有碰到什麼問題。

而不使用clamp()是我自己本身的習慣，畢竟利用min()和max()就能達到一樣的效果。

另外還要注意，chrome呈現的最小字體是12px，就算CSS設定8px也沒有用喔。

css max min responsive rwd vw 取得連結 Facebook Twitter Pinterest 以電子郵件傳送 其他應用程式 留言 這個網誌中的熱門文章 運用資料層dataLayer.push建立GTM自訂事件 作者： cjzopen - 12月05,2017 GTM（GoogleTagManager；網頁代碼管理工具）最大的好處在於讓頁面較整潔、許多系統已經寫好的事件與變數可以直接拿來用，非常方便。

但現實往往沒那麼簡單，通常都會遇到一堆ajax、history或cache要處理，這時候就要請到自訂事件出馬了。

若只用GA，沒有使用GTM的話，自訂事件要這樣寫：gtag('event',...,{'event_category':...,'event_label':...});那如果用GTM的話該如何操作呢？若使用的是GA4，可以參考【GA4基本設定：內部IP、GTM自訂事件、跨網域設定】。

另外，GA3於2023年7月1日停用。

將資料push進dataLayer首先我們要知道什麼是dataLayer：一個GTM內部的全域變數，它能動態存取網頁的使用者行為數據。

更進一步探索它的 JSON 架構，可以在網頁上使用開發者工具(F12)的console欄，輸入dataLayer，其實跟它的名字一樣就是層層分明的資料層(DataLayer)。

在F12中查看dataLayer你會發現GTM測試欄位左邊有幾個事件，dataLayer裡面就有幾個object。

再把object點開（這裡以WindowLoaded為例），會有event和GTM給的事件id，而這個事件（gtm_load）其實就是「觸發條件」裡的「視窗已載入」。

因此，我們可以依樣畫葫蘆用dataLayer.push自己寫一段觸發條件把資料送進dataLayer，就可以在GTM裡面操作了：開始設定自訂事件先宣告dataLayer，避免發生undefinederror再設定你要push進去的數據這裡我們用「nava點擊偵測」和ajax事件舉例（jQuery）：vardataLayer=window.dataLayer||[];//example1:detectnavatagclick$('nava').click(function READTHIS» 網頁標題在Google搜尋結果會被如何更改？SEO是否會被影響？ 作者： cjzopen - 8月25,2021 有些網頁在SERP的標題