כיצד ליצור טיפוגרפיה רספונסיבית עם CSS

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

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

חשיבותה של טיפוגרפיה רספונסיבית

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

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

הנה תבנית קוד שתוכל להעתיק לעורך הקוד שלך לפני שתתחיל, כדי שתוכל לעקוב אחר הטכניקות שיידונו.

קובץ קוד ה-HTML

index.html
html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8">
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0">
<קישורrel="גיליון סגנונות"href="style.css">
<כותרת> טיפוגרפיה רספונסיבית כותרת>
רֹאשׁ>
<גוּף>
<divמעמד="מְכוֹלָה">
<h1> לורם איפסום h1>
<ע> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
ע>
div>
גוּף>
html>

קובץ קוד ה-CSS

/*style.css*/
גוּף{
לְהַצִיג: לְהַגמִישׁ;
להצדיק-תוכן: מֶרְכָּז;
align-items: מֶרְכָּז;
גוֹבַה: 100vh;
}
.מְכוֹלָה{
רוֹחַב: 400פיקסלים;
צבע רקע: לבן עתיק;
ריפוד: 15פיקסלים;
צל קופסא:0 2פיקסלים 5פיקסליםrgba(0,0,0, 0.1) ;
}
h1{
צֶבַע: ורוד עז;
}

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

1. הידוק

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

מהדק (ערך מינימלי, ערך אידיאלי, ערך מקסימלי):

h1{
גודל גופן: מַהְדֵק(2rem, 5vw, 3rem);
}
ע{
גודל גופן: מַהְדֵק(1rem, 3vw, 2rem);
}

בדוגמה זו, גדלי הגופן עבור הכותרת והפיסקה נקבעים באמצעות הפונקציה "clamp()". עבור הכותרת "h1" הערך המינימלי מוגדר ל-"2rem", מה שמבטיח שגודל הגופן לא יורד מתחת פי שניים מגודל הגופן הבסיסי. הערך האידיאלי או המועדף מוגדר ל-"5vw", שהוא 5% מרוחב יציאת התצוגה, מה שהופך אותו להגיב לגדלי מסך שונים. הערך המקסימלי מוגדר ל-"3 rem" מה שמבטיח שגודל הגופן לא יהיה גדול מפי שלושה מגודל הגופן הבסיסי. להיפך עבור סגנון הפסקה.

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

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

/* גודל גופן ברירת מחדל */
h1{
גודל גופן: 38פיקסלים;
}
ע{
גודל גופן: 20פיקסלים;
}
/* גודל גופן למסכים קטנים */
@כְּלֵי תִקְשׁוֹרֶת (רוחב מקסימלי:800 פיקסלים){
h1{
גודל גופן: 32פיקסלים;
}
ע{
גודל גופן: 18פיקסלים;
}
}
/* גודל גופן למסכים קטנים יותר */
@כְּלֵי תִקְשׁוֹרֶת (רוחב מקסימלי:400 פיקסלים){
h1{
גודל גופן: 28פיקסלים;
}
ע{
גודל גופן: 15פיקסלים;
}
}

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

3. מאפייני CSS מותאמים אישית

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

:שורש {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5 רמ;
}
h1{
גודל גופן: var(--heading-font-size);
}
ע{
גודל גופן: var(--paragraph-font-size);
}
@כְּלֵי תִקְשׁוֹרֶת (רוחב מקסימלי:800 פיקסלים){
:שורש {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9 רמ;
}
}
@כְּלֵי תִקְשׁוֹרֶת (רוחב מקסימלי:400 פיקסלים){
:שורש {
--heading-font-size: 1.5 רמ;
--paragraph-font-size: 0.8 רמ;
}
}

בדוגמה זו, מאפיין CSS מוגדר ברמת הבסיס, מה שמאפשר לנו לגשת אליו באופן גלובלי. ה--heading-font-size ו--paragraph-font-size הם שמות תיאוריים לכותרת ולפסקה, בהתאמה, עם ערכי ברירת מחדל שניתנו לשניהם. ניתן לעשות שימוש חוזר בטכניקה זו עבור שאילתות מדיה שונות כדי להבטיח עקביות בכל רחבי הלוח.

שיטות מומלצות לטיפוגרפיה רספונסיבית

מקובל בקרב מפתחים להשתמש ברוחב יציאת התצוגה (vw) ישירות כדי לבצע טיפוגרפיה. למרות שזה פשוט ונראה שהוא עובד, הוא הופך זעיר בגדלים של מסך קטנים וגדול במיוחד בגדלים של מסך גדול. זה קורה גם כאשר אתה מתקרב והרחק מהדף שלך. אם אתה יכול, הימנע משימוש ישירות ב-viewport כך;

h1{
גודל גופן: 2vh;
 }

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

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

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