עיצוב רספונסיבי

שיטות מומלצות כלליות

• אפשר להשתמש בשאילתות @container כדי ליצור פריסות רספונסיביות שמבוססות על רכיבים ומתאימות את עצמן לגודל של מאגר האב, ולא לאזור התצוגה. לפרטים נוספים, ראו עיצוב מותאם לגודל.
• כדי למנוע שיבושים בפריסה כשמופיעים או נעלמים רכיבים בממשק המשתמש של הדפדפן בנייד (כמו סרגלי כתובות), צריך להשתמש ביחידות דינמיות של אזור התצוגה (dvh,‏ dvw) במקום vh/vw.
• כדאי להשתמש ב-aspect-ratio לרכיבי מדיה (כמו <img> ו-<video>) כדי לשמור מקום בזמן הטעינה ולמנוע שינוי פריסה מצטבר (CLS).

כדי להבין את המכניקה של הפריסה שמאחורי ממשק משתמש רספונסיבי (flexbox, ‏ grid, יחידות של שאילתות קונטיינר, יחידות של אזור תצוגה), קראו את המאמר פריסות CSS ועיצוב רספונסיבי.

טיפוגרפיה רספונסיבית

• מומלץ לשלב יחידות יחסיות של אזור התצוגה ושל הגופן ב-clamp() כדי שגודל הגופן ישתנה בהתאם לגודל של אזור התצוגה, אבל יישאר בטווח הרצוי. לדוגמה, clamp(2rem, 1rem + 5vw, 4rem). כדי לשלוט במהירות שבה גודל הגופן משתנה, משנים את היחס בין היחידות היחסיות של אזור התצוגה לבין היחידות היחסיות של הגופן.
• אל תשתמשו ב-vw לבד לגודל הגופן בלי clamp(), כי זה יכול להקטין או להגדיל את הטקסט יותר מדי במסכים קיצוניים.

כדי לשנות את הגודל של הגופן והריווח בהתאם למאגר התגים במקום לאזור התצוגה, אפשר לעיין במאמר בנושא התאמה גמישה לעומס.