כותרת: "CSS Clamp Generator: Fluid Typography and Spacing Without Media Queries" slug: css-clamp-generator-guide tool: css-clamp-generator category: css type: cluster
מחולל מהדק CSS: טיפוגרפיה נוזלית ומרווח ללא שאילתות מדיה
נהגתי לשמור בית קברות לשאילתות מדיה בתחתית כל גיליון סגנונות כותרת גיבור תהיה 28px בטלפונים, ואז נקודת שבירה תקעה אותו ל-36px, אחר ל-44px, אחר ל-56px במסכים רחבים ארבע נקודות שבירה עבור כותרת אחת, וזה עדיין נראה קופצני: הטקסט ישב קפוא במהירות של 36px על פני טווח עצום של רוחבי טאבלט ואז נדחק לגודל הבא ברגע שנקודת שבירה מעדה כשבניתי מחדש את אתר השיווק של אחד ממוצרי Laravel שלי, מחקתי את כל זה והחלפתי כל אחת מהכותרות האלה ביחיד clamp() קו. הסוג גדל כעת בצורה חלקה עם החלון, וגיליון הסגנונות קצר ורגוע יותר.
זו כל ההבטחה לגודל נוזלים, וזו הסיבה שבניתי את CSS מהדק גנרטור על Toolz.dev. אתה נותן לו גודל קטן, גודל גדול וטווח יציאות התצוגה שאליו הם ממפים, והוא מחזיר שורה אחת של CSS שמבצע אינטרפולציה של כל גודל שביניהם.
TL;DR:
clamp(min, preferred, max)מחזירה ערך מוגבל בין מינימום למקסימום, תוך שימוש בערך מועדף באמצע המחולל מחשב את הערך המועדף כקבועremמונח פלוס אvwמונח, כך שהצהרה אחת משנה את גודל הגופן או המרווח בצורה חלקה על פני יציאת התצוגה ללא שאילתות מדיה. להשתמשremגבולות לנגישות, ותצוגה מקדימה של הגודל המחושב בכל רוחב לפני המשלוח.
מהו מהדק CSS () ומה הוא עושה?
clamp() היא פונקציית CSS המחזירה ערך נעול בין גבול תחתון ועליון, המוגדר ב ערכי ויחידות CSS רמה 4. נדרשים שלושה טיעונים בסדר clamp(minimum, preferred, maximum). הדפדפן מעריך את הערך המועדף, ואם ערך זה יירד מתחת למינימום הוא משתמש במינימום, ואם הוא יעלה מעל המקסימום הוא משתמש במקסימום. בכל מקום באמצע, הוא משתמש בערך המועדף.
הפונקציה מוגדרת במפרט CSS Values and Units Module Level 4 (https://www.w3.org/TR/css-values-4/), לצד בני דודיו min() ו max(). מה שהופך אותו לעוצמתי לפריסה הוא שהערך המועדף יכול לערבב יחידות. אם אתה גורם לערך המועדף להיות תלוי vw, שהוא אחוז אחד מרוחב יציאת התצוגה, אז התוצאה משתנה עם החלון, בעוד שהמינימום והמקסימום מונעים ממנו להיות קטן מדי או גדול מדי.
מדוע עלי להפסיק לכתוב שאילתות מדיה לגודל?
שאילתות מדיה הן פונקציות צעד גודל מחזיק שטוח, ואז קופץ בנקודת שבירה, ואז מחזיק שוב שטוח זה מייצר שני מטרדים ראשית, הקפיצה נראית: כותרת מצטלבת מגודל אחד למשנהו ככל שמשנים את הגודל, שנראה לא מלוטש שנית, האזורים השטוחים הם פשרה: גודל שנבחר להיראות מקובל על פני כל טווח הטאבלטים הוא, בהגדרה, מעט גדול מדי בקצה אחד ומעט קטן מדי בקצה השני.
גודל נוזל עם clamp() היא פונקציה רציפה במקום זאת הערך משתנה על ידי שערה עבור כל פיקסל של רוחב viewport, אז אין קפיצה ואין גודל פשרה כותרת אחת שקוראת היטב ב 320px ובאר ב 1280px גם לקרוא היטב בכל רוחב ביניהם, כי הוא מחושב עבור רוחב מדויק זה אתה מחליף ערימה של נקודות שבירה עבור קו בודד, ואת הקו מתנהג טוב יותר מאשר הערימה עשתה.
יש גם ניצחון תחזוקה כאשר מעצב משנה את גדלי היעד, אתה עורך הצהרה אחת במקום לצוד דרך ארבע שאילתות מדיה כדי לשמור אותם עקביים פחות מקומות לשנות פירושו פחות מקומות לטעות.
כיצד המחולל מחשב את הערך המועדף?
זה החלק שרוב האנשים לוקחים על אמונה, אז הנה המתמטיקה בפועל שהכלי מריץ אתה נותן לו שתי נקודות: הגודל המינימלי בנקודת התצוגה המינימלית, והגודל המקסימלי בנקודת התצוגה המקסימלית קו ישר דרך שתי נקודות נקבע במלואו, אז הכלי מוצא את הקו הזה.
השיפוע הוא השינוי בגודל חלקי השינוי ברוחב יציאת התצוגה: (maxSize - minSize) / (maxViewport - minViewport), נמדד בפיקסלים בגודל לפיקסל של נקודת מבט לקו יש גם יירוט y, הגודל שיהיה לקו בנקודת מבט של אפס, כלומר minSize - slope * minViewport.
עכשיו הטריק שהופך את הקו הזה ל-CSS. אורך של Xvw שווה X אחוז מרוחב יציאת התצוגה, כך שהחלק היחסי של יציאת התצוגה של הקו הופך (slope * 100)vw, והיירוט נפלט כקבוע rem ערך. התוצאה היא ערך מועדף כמו 0.8333rem + 0.8333vw. עטפו אותו פנימה clamp() עם שני הגדלים כגבולות ואתה מקבל, עבור הדוגמה הקלאסית של 16px ב 320px גדל ל 24px ב 1280px, clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
אתה לא צריך לסמוך על זה בצורה עיוורת, וזו הסיבה שהכלי מציג טבלת תצוגה מקדימה של הגודל המחושב במספר רוחבי יציאות תצוגה. ב-320 פיקסלים הוא קורא 16 פיקסלים, ב-1280 פיקסלים הוא קורא 24 פיקסלים, והערכים שביניהם מאשרים שהשורה עושה את מה שאתה מצפה.
האם עלי להשתמש ב-px או rem עבור ערכי clamp()?
להשתמש rem לגבולות. א rem הוא ביחס לגודל גופן השורש, כך שכאשר משתמש מגדיל את הדפדפן שלו's גודל גופן ברירת מחדל לקריאה, גדלים מבוטאים ב rem הגדל עם זה. גדלים מבוטאים ב px אל תעשה, ששובר בשקט את בקרת הנגישות הזו זו המלצה ארוכת שנים והיא חלה על clamp() בדיוק כפי שהוא חל על כל גודל גופן.
הגנרטור מאפשר לך להקליד גדלי קלט בכל אחד מהם px או rem כי מעצבים מוסרים ערכי px הרבה יותר לעתים קרובות, אבל זה תמיד פולט את הגבולות פנימה rem, המרה עם גודל גופן השורש שהגדרת, אשר ברירת המחדל היא 16px.אם הפרויקט שלך משתמש בבסיס אחר, הגדר אותו והפלט מתאים. אם ברצונך לבדוק שוב המרה גולמית של px ל-rem מחוץ לזרימת העבודה של המהדק, ה ממיר יחידת CSS עושה בדיוק את זה וחולק את אותו היגיון המרה, אז המספרים מסתדרים.
האם אני יכול להשתמש מהדק () עבור מרווח, לא רק גודל גופן?
כן, וכאן זה מפסיק להיות טריק טיפוגרפיה והופך לכלי פריסה. clamp() עובד על כל נכס באורך: margin, padding, gap, width, height, ו line-height כולם מקבלים את זה קטע שצריך מרווח נשימה יכול להשתמש בנוזל padding זה גדל מ-24 פיקסלים בטלפונים ל-80 פיקסלים במחשבים שולחניים בהצהרה אחת, כך שהרווח הלבן משתנה עם המסך במקום להרגיש צפוף על צגים גדולים או בזבזני על צגים קטנים.
אני משתמש בנוזל gap על רשתות כרטיסים ללא הרף ניתן להתאים את הכרטיסים עצמם עם הרשת, אך מרווח נוזלי שומר על הקצב ביניהם פרופורציונלי בכל רוחב. למחולל המהדק לא אכפת לאיזה תכונה אתה מדביק את הערך, כך שאותו כלי מכסה מידות סוג, מרווח ופריסה.
איך clamp () בהשוואה לטכניקות תגובה אחרות?
| טכניקה | קנה מידה | שורות של CSS | חלקות |
|---|---|---|---|
| גודל קבוע | אף אחד | 1 | N/A |
| שאילתות מדיה | צעד בנקודות שבירה | כמה לכל אלמנט | קופץ בכל נקודת שבירה |
גלם vw יחידה |
רציף, בלתי מוגבל | 1 | חלק אבל יכול להיות קטן או גדול מדי |
clamp() |
רציף, מוגבל | 1 | חלק ותחומה בבטחה |
הגולמי vw שווה להתעכב על שורה, כי להגיע אליה vw לבד הוא החצי-צעד הנפוץ שאנשים לוקחים לפני שהם מגלים clamp(). טהור vw גודל הגופן משתנה בצורה חלקה, אבל אין לו רצפה ואין לו תקרה, כך שהוא הופך קטן באופן בלתי קריא בטלפונים וגדול באופן קומי על צגים רחבים. clamp() הוא vw עם מעקות בטיחות, שזה כמעט תמיד מה שרצית בפועל.
מדוע ערך המהדק () שלי לא משתנה?
שתי סיבות אחראיות כמעט לכל " זה תקוע" להגיש תלונה הראשונה היא שהגדלים המינימליים והמקסימליים שווים, מה שהופך את השיפוע לאפס, כך שהערך המועדף הוא קבוע והגודל אף פעם לא זז. אם אתה רוצה שזה יתוקן, זה בסדר, אבל אם ציפית לקנה מידה, תן לשני הגדלים ערכים שונים.
השני הוא שאתה בודק מחוץ לטווח viewport.מתחת לviewport המינימלי, clamp() נכון ננעל לגודל המינימלי, ומעל יציאת התצוגה המקסימלית הוא ננעל למקסימום אז אם הטווח שלך הוא 320px עד 1280px ואתה משנה את גודל הצג של 1600px, הערך ישב במקסימום ויראה קפוא, בדיוק כפי שתוכנן בדוק ברוחב בין שתי יציאות התצוגה שלך כדי לראות את קנה המידה טבלת התצוגה המקדימה ב גנרטור מהדק עוקף זאת על ידי הצגת הערך המחושב על פני הטווח במבט חטוף.
איך זה מתאים לשאר זרימת העבודה של CSS?
גודל נוזל הוא חתיכה אחת של שכבת פוליש. ברגע שסוג ומרווח קנה מידה בצורה חלקה, הדברים הבאים שאני מכוון הם הפרטים הדקורטיביים, ואותו אתר בדרך כלל נשען על כמה כלים יחד.
אני מצמיד את מחולל המהדק עם ה מחולל גרדיאנט לקטעי גיבורים זורמים, ועם ה מחולל צללים תיבת להגבהה שנשארת עקבית על פני רכיבים צבע עובר דרך ממיר צבע אז כל ערך מתבטא בפורמט המדויק שכל הקשר צריך. הארבעה האלה מכסים את רוב מה שאני מגיע אליו כשאני הופך פריסה גסה לפריסה שנשלחה.
אם אתה רוצה את התמונה הרחבה יותר של איך אלה משתלבים זה בזה, כתבתי את ההגדרה היומיומית שלי ב- ערכת כלים למפתחי אינטרנט, ויש הדרכה ייעודית של שיפועים ב מדריך מחולל שיפוע CSS שמשתלב באופן טבעי עם עבודת פריסה נוזלית.
האם כל הדפדפנים תומכים ב-clamp()?
כן כן. clamp(), יחד עם min() ו max(), נתמך בכל הדפדפנים המודרניים, כולל Chrome, Firefox, Safari ו-Edge הנוכחיים, וכבר שנים. עבור הרוב המכריע של הפרויקטים אתה יכול להשתמש בו ללא נפילה כלל.
אם אתה חייב לתמוך בדפדפן עתיק באמת, הדפוס החינני הוא להכריז על ערך סטטי על הקו לפני clamp() הַצהָרָה. דפדפנים שלא מבינים clamp() התעלם מהקו שהם לא יכולים לנתח ולשמור על הערך הסטטי, בעוד שדפדפנים מודרניים מיישמים את הערך הנזיל. גישת השיפור המתקדם עולה שורה אחת נוספת ומסירה כל סיכון, אבל בשנת 2026 אתה רק לעתים רחוקות צריך את זה.
דוגמה מעובדת: ריפוד מקטע נוזלים
תן לי ללכת מקרה אמיתי מקצה לקצה, כי הנוסחה המופשטת לוחצת מהר יותר עם מספרים נגיד קטע שיווק צריך להיות 24px של ריפוד אנכי על הטלפונים הקטנים ביותר ו 80px על שולחנות עבודה גדולים, קנה מידה בין 320px ו viewport 1440px.אלה שתי הנקודות שלי: 24px ב 320px, ו 80px ב 1440px.
השיפוע הוא (80 - 24) / (1440 - 320), כלומר 56 / 1120, או 0.05 פיקסלים של ריפוד לפיקסל של viewport. היירוט הוא 24 - 0.05 * 320, כלומר 24 - 16, או 8px, ו 8px בשורש 16px הוא 0.5rem. ה vw מקדם הוא 0.05 * 100, כלומר 5vw. אז הערך המועדף הוא 0.5rem + 5vw, וההצהרה המלאה היא clamp(1.5rem, 0.5rem + 5vw, 5rem), מכיוון ש-24 פיקסלים הוא 1.5rem ו-80px הוא 5rem.
זרוק את זה על padding-block והקטע נושם נכון בכל רוחב: הדוק בטלפונים, נדיב במחשבים שולחניים, ופרופורציונלי חלק ביניהם הגנרטור מייצר בדיוק את זה בשבילך, וטבלת התצוגה המקדימה שלו מאשרת שהריפוד קורא 24px ב-320px ו-80px ב-1440px כך שתוכל לסמוך על הקו לפני שתדביק אותו.
כיצד אוכל לבדוק ערך מהדק ()?
בדיקת השפיות המהירה ביותר היא טבלת התצוגה המקדימה במחולל, שמעריכה את הערך המהודק בפריסה של רוחבים נפוצים. אבל כדאי לדעת איך לאמת גם אחד חי בדפדפן. שנה את גודל החלון וצפה בנכס עם DevTools פתוח: הערך המחושב בחלונית הסגנונות מתעדכן ברציפות, ותוכל לאשר שהוא מפסיק להשתנות בדיוק בשני גבולות התצוגה שלך. בדיקה חיה זו היא הדרך שבה תפסתי ערך תקוע פעם אחת שהתברר כגדלים מינימליים ומקסימליים שווים, הטעות הקלאסית של אפס שיפוע.
עבור ערך המשמש בגודל גופן באופן ספציפי, בדוק גם בזום דפדפן מוגדל וגודל גופן ברירת מחדל מוגדל. כי הגבולות נמצאים rem, כל העקומה צריכה להגדיל את ההגדרה של גודל גופן & #39;s, שהיא התנהגות הנגישות הרצויה והסיבה שהמחולל פולט rem יותר מאשר px. אם הוא לא משנה קנה מידה, בדוק שלא קודדת קוד קשיח א px קשור איפשהו במורד הזרם.
שאלות נפוצות
מה CSS clamp () עושה?
clamp () מחזיר ערך מוגבל בין מינימום למקסימום. זה לוקח שלושה ארגומנטים, clamp (min, preferred, max), והדפדפן משתמש בערך המועדף אלא אם כן הוא יירד מתחת למינימום או יעלה מעל המקסימום, ובמקרה זה הוא משתמש בכבול זה מאפשר להצהרה אחת להתנהג בתגובה ללא שאילתות מדיה.
כיצד המחולל מחשב את הערך המועדף?
הוא מחשב את הערך כקו ישר דרך שתי הנקודות שלך: הגודל המינימלי בנקודת התצוגה המינימלית והגודל המקסימלי בנקודת התצוגה המקסימלית. קו זה מבוטא כמונח rem קבוע בתוספת מונח vw, כך שהערך גדל באופן פרופורציונלי עם רוחב יציאת התצוגה בעוד מהדק () שומר אותו בגבולות שלך.
האם עלי להשתמש ב-px או rem עבור ערכי clamp()?
השתמש rem עבור הגבולות כך הערך מכבד משתמש אשר משנה את גודל הגופן בדפדפן שלהם, אשר טוב יותר עבור נגישות. this generator acceptes in in em or and always emits the bounds in rem, converting with the root font size you set (16px by default).
האם אני יכול להשתמש מהדק () עבור מרווח, לא רק גודל גופן?
כן. מהדק () עובד על כל מאפיין אורך, כולל שוליים, ריפוד, מרווח, רוחב, גובה וגובה קו. טיפוגרפיה נוזלית היא השימוש הנפוץ ביותר, אך אותו ערך שנוצר משנה באופן נוזלי את ממדי המרווח והפריסה על פני טווח יציאת התצוגה.
באיזה טווח viewport עלי לבחור?
טווח נפוץ הוא 320px עבור הטלפונים הקטנים ביותר עד כ-1280px או 1440px עבור מחשבים שולחניים גדולים הגודל המינימלי מתקיים מתחת לפתח התצוגה התחתון והגודל המקסימלי מתקיים מעל פתח התצוגה העליון, אז בחר טווח שמתאים למקום שבו אתה רוצה שהקנה מידה יתחיל ויעצור.
מדוע ערך המהדק () שלי לא משתנה?
אם הערך נשאר קבוע, הגדלים המינימליים והמקסימליים כנראה שווים, מה שמייצר שיפוע אפס, או שפתח התצוגה נמצא מחוץ לטווח שלך אז מהדק () ננעל עד גבול בדוק ששני הגדלים שונים ושאתה בודק ברוחב בין יציאות התצוגה המינימליות והמקסימליות.
האם כל הדפדפנים תומכים ב-clamp()?
כן. clamp (), יחד עם min () ו-max (), נתמך בכל הדפדפנים המודרניים כולל Chrome, Firefox, Safari ו-Edge. עבור דפדפנים ישנים מאוד אתה יכול לספק ערך נפילה סטטי על הקו לפני הצהרת clamp ().
האם מחולל מהדק CSS חופשי ופרטי?
כן. המחולל חינמי לחלוטין ללא הרשמה או מגבלות, וכל החישובים פועלים בדפדפן שלך עם JavaScript בצד הלקוח, כך שהערכים שאתה מזין לעולם לא עוזבים את המכשיר שלך והכלי עובד במצב לא מקוון לאחר טעינת הדף.
