שליטה בעיצוב אתרים רספונסיבי עם פונקציות מתמטיות של CSS

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

CSS מגיע עם שלוש פונקציות מתמטיות שימושיות שישנו את הדרך בה אתה מעצב את האתרים שלך. אנו נראה לך כיצד ולמה עליך להשתמש בהם.

היכרות עם מתמטיקה ל-CSS

CSS הוא בעיקרו הצהרתי, אך תיקונים הכניסו פונקציות לשפה. יש כעת פונקציות רבות במפרט, ושלוש מהמתמטיות הפשוטות ביותר יכולות להיות שימושיות מאוד: calc, max ו-min.

אתה יכול להשתמש דוגמה פשוטה זו של CodePen לעזור לעקוב אחרי המדריך.

CSS calc() פונקציה מתמטית

הפונקציה CSS calc() מבצעת חישוב פשוט ומשתמשת בתוצאה כערך מאפיין. זה אומר שאתה יכול להקצות ערכים דינמיים למאפיינים כמו גובה ורוחב, כולם בלי שאילתות CSS @media.

פונקציה זו תומכת בחיבור (+), כפל (*), חיסור (-) וחילוק (/) עם אופרטור יחיד.

דוגמה: יצירת מרווח אחיד בין גדלי מסך

לגרום לדף אינטרנט להיראות זהה בגדלים שונים יכול להיות קשה, גם אם אתה משתמש ביחידות CSS דינמיות כמו vw ו-%. הפונקציה CSS calc() משנה זאת.

כפי שניתן לראות בתמונה למעלה, לשורת הכותרת שעוברת על פני המסך יש מרווחים שונים בהתאם לגודל המסך. הסיבה לכך היא שקבענו את הרוחב ל-80vw, והגדרנו את המרווח ל-20vw; ערך משתנה.

אם נשתמש ב-calc() במקום זאת, נוכל להגדיר את המרווח להיות זהה בכל גודל מסך. הנכס בו אנו משתמשים לשם כך נראה כך:

רוחב: calc (100vw - 400px);

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

CSS max() פונקציית מתמטיקה

הפונקציה CSS max() בוחרת את הערך הגבוה ביותר ממאגר כדי להוסיף ערך למאפיין CSS. אתה יכול להוסיף כמה ערכים פוטנציאליים שתרצה, כאשר כל אחד מהם מופרד בפסיק, אך הוא ישתמש רק בערכים הגבוהים ביותר.

דוגמה: הגבלת גובה סרגל הניווט

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

זה יכול לגרום לערך של נכס להיראות נהדר במחשב שולחני ורע בנייד, בדיוק כמו שהתמונה למעלה מציגה. לסרגל הניווט שלנו יש גובה מוגדר של 10Vh, אבל זה גורם לסרגל להיראות דק במכשירים שולחניים.

אנו יכולים להשתמש בפונקציה CSS max() כדי לפתור את הבעיה הזו:

גובה: מקסימום (10Vh, 80px);

על ידי הוספת כלל כזה, נוכל להגדיר גובה מינימלי של 80px עבור סרגל הניווט שלנו, תוך שמירה על הערך של 10vh אם הוא גבוה יותר.

CSS min() פונקציית מתמטיקה

הפונקציה min() היא כמו הפונקציה max(), אך היא בוחרת את הערך הנמוך ביותר ממאגר לשימוש כערך המאפיין.

דוגמה: הגדרת גודל טקסט מרבי

בין אם אתה משתמש בערך דינמי או לא, קבלת גודל טקסט בין הפלטפורמות יכול להיות מסובך. אנו יכולים להשתמש בפונקציה CSS min() כדי להגדיר שני ערכי מאפיינים פוטנציאליים או יותר עבור גודל הטקסט הראשי של הכותרת שלנו, והיא תשתמש בקטן ביותר.

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

כדי לשנות זאת, אתה יכול להשתמש בפונקציה CSS min() כדי לספק גודל חלופי:

גודל גופן: min (10vh, 10vw);

דוגמה זו עובדת מכיוון שצגים ניידים הם גבוהים ודקים, ואילו צגים שולחניים רחבים וקצרים. המשמעות היא שיחידת רוחב התצוגה (vw) קטנה יותר בנייד מאשר במחשב שולחני.

שימוש במתמטיקה לעיצוב אתרים רספונסיבי

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

כמובן, ישנן שיטות אחרות ופונקציות CSS שבהן אתה יכול להשתמש כדי ליצור אתר שנראה נהדר על פני פלטפורמות.

כיצד לבנות סרגל ניווט רספונסיבי באמצעות HTML ו-CSS

קרא הבא

על הסופר