פריסות גמישות

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 63 מתוך 76.

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

העקרונות המרכזיים של פריסות זורמות כוללים:

יחידות יחסיות: שימוש באחוזים (%), ביחידות של אזור התצוגה (vw, vh) או ביחידות em (em) במקום בפיקסלים קבועים (px) עבור רוחב, גובה, שוליים וריפוד.

רשתות גמישות: שימוש ב-CSS Grid או ב-Flexbox ליצירת פריסות מבוססות רשת שיכולות להתאים לגדלי מסך שונים.

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

הנה דוגמה לפריסה נוזלית בסיסית באמצעות אחוזים:

.container {
    width: 90%; /* המכל תופס 90% מרוחב אזור התצוגה */
    max-width: 1200px; /* רוחב המכל לא יעלה על 1200px */
}
.sidebar {
    width: 30%; /* סרגל הצד תופס 30% מרוחב המכל */
    float: left;
}
.main-content {
    width: 70%; /* אזור התוכן הראשי תופס 70% מרוחב המכל */
    float: left;
}

בדוגמה הזו, לרכיב .container יש רוחב גמיש של 90%, כלומר הוא תמיד יתפוס 90% מרוחב אזור התצוגה. המאפיין max-width מוגדר ל־1200px כדי למנוע מהמכל להפוך לרחב מדי במסכים גדולים.

לאלמנטים .sidebar ו-.main-content יש רוחבים גמישים של 30% ו-70%, בהתאמה, המאפשרים להם להתאים את עצמם לרוחב של המכל.

אתגר

קל

ניתן לך מסמך HTML עם חלוקה אב ( <div> ) שמכילה שתי חלוקות צאצא ( <div> ) עם המחלקות sidebar ו-main. המשימה שלך היא ליצור פריסה גמישה באמצעות אחוזים. בצע את השלבים הבאים:

כתוב כלל CSS שפונה לרכיב <div> עם המחלקה container. הגדר את המאפיין width שלו ל-80% ואת margin ל-0 auto. הוסף border של 1px solid black לצורכי המחשה.
כתוב כלל CSS שפונה לרכיב <div> עם המחלקה sidebar. הגדר את המאפיין width שלו ל-25% וקבע שהוא יצוף שמאלה.
כתוב כלל CSS שפונה לרכיב <div> עם המחלקה main. הגדר את המאפיין width שלו ל-75% וקבע שהוא יצוף ימינה.

נסו בעצמכם

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>