CSS 鉗產生器

CSS 箝位 () 產生器建立一個單一箝位(最小、首選、最大)聲明,可在兩個螢幕寬度之間平滑地縮放值。您無需編寫多個媒體查詢來將標題從手機上的24px 步進到桌面上的48px,而是設定最小尺寸、最大尺寸以及它們映射到的視口範圍,生成器傳回一行CSS,該行對中間的每個尺寸進行內插。

箝位 () 函數採用三個參數:下限、首選值和上限。瀏覽器使用首選值,除非它低於最小值或高於最大值,在這種情況下,它會鎖定到該界限。此產生器將首選值計算為視口的線性函數,將固定 rem 項與 vw 項結合,因此結果與視窗同步增長,同時永遠不會低於最小值或超過最大值。這種技術通常稱為流體排版,儘管它對於邊距、填充、間隙和寬度同樣有效。

一切都在您的瀏覽器中使用客戶端 JavaScript 進行計算,因此您輸入的任何內容都不會上傳,並且工具在載入後可以離線工作。您可以輸入像素或 rem 中的大小,設定自訂根字體大小,並讀取顯示公共視窗寬度下計算值的預覽表,以便您可以在將夾子貼上到樣式表中之前確認曲線的行為。

流體尺寸有一個值得刻意避免的輔助陷阱。中間項純粹以視窗單位表達的夾緊表達式忽略了讀者的字體大小設置,因為大眾對此沒有回應,並且無法增長的文字會失敗 WCAG 1.4。4。將 rem 元件保留在首選值中(即產生的輸出所做的值)意味著大小仍然響應瀏覽器縮放和更大的預設字體。始終設定兩個界限:沒有它們,值在任一方向上都沒有限制。

這是真實標題上的 CSS 夾具產生器。輸入 24 和 48 px 作為尺寸,360 和 1440 作為視窗,保留 16px 根,然後按生成夾 ()。輸出為字體大小:夾子(1.5rem、1rem + 2.2222vw、3rem);預覽表確認:360 處為 24px,768 處為 33.07px,1024 處為 38.76px,1440 處為 48px。低於 360 時,標題保持在 1.5rem,高於 1440 時,它停在 3rem,這是有界限的流體排版的整個點。