מהו עיצוב רספונסיבי?

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

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

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

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

תמונות ומדיה גמישות: יש לוודא שתמונות ומדיה אחרת ישתנו בהתאם לפריסה ובאופן פרופורציונלי.

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

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

אתגר

קל

ניתן לך מסמך HTML עם כותרת (<h1>), פסקה (<p>) ושתי תמונות (<img>). המשימה שלך היא להוסיף CSS בסיסי כדי להפוך את הרכיבים לרספונסיביים ולהדגים בבירור את ההבדל בין גובה קבוע לגובה אוטומטי. בצע את השלבים הבאים:

כתוב כלל CSS שחל על הרכיב <h1>. הגדר את גודל הגופן ל-5vw. כך גודל הגופן של הכותרת יהיה רספונסיבי לרוחב אזור התצוגה.
כתוב כלל CSS שחל על הרכיב <p>. הגדר את גודל הגופן ל-3vw. כך גודל הגופן של הפסקה יהיה רספונסיבי לרוחב אזור התצוגה.
כתוב כלל CSS שחל על המחלקה .fixed-height. הגדר את הרוחב ל-100% ואת הגובה ל-150px. כך תיווצר תמונה מעוותת, משום שנכפה עליה גובה קבוע.
כתוב כלל CSS שחל על המחלקה .auto-height. הגדר את הרוחב ל-100% ואת הגובה ל-auto. כך התמונה תשנה את גודלה באופן פרופורציונלי תוך שמירה על יחס הגובה-רוחב שלה.
כתוב כללי CSS למכלים (.container) כדי להגדיר להם רוחב של 300px, מסגרת של 2px solid #ccc, שוליים של 20px וריפוד של 10px.

נסו בעצמכם

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>