יסודות Media Queries

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

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

תחביר בסיסי לשאילתות מדיה:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

תנאי: הכלל שמפעיל את הסגנונות (למשל, max-width: 600px).
בורר: רכיב/י ה-HTML שיש לעצב.

property: מאפיין ה-CSS שיש להגדיר (למשל, width, font-size).
value: הערך שמוקצה למאפיין, ומשתנה בהתאם לתנאי שאילתת המדיה.

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

max-width: מגביל את הסגנונות למסכים שרוחבם המרבי הוא (למשל, max-width: 600px).
min-width: מחיל סגנונות על מסכים שרוחבם המזערי הוא (למשל, min-width: 768px).

max-height: מגביל סגנונות למסכים שגובהם המרבי הוא (למשל, max-height: 400px).
min-height: מחיל סגנונות על מסכים שגובהם המזערי הוא (למשל, min-height: 500px).

התנאים האלה עוזרים לך לשלוט במראה האתר שלך במכשירים ובכיוונים שונים.

דוגמה:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

הצבע של הרקע משתנה ל־lightblue כאשר רוחב המסך הוא 600px או פחות. במסכים שרוחבם בין 601px ל־1024px, צבע הרקע יהיה lightgreen.

אתגר

קל

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

הוסף שאילתת @media למסכים שרוחבם המרבי הוא 600px:
- הגדר את צבע הרקע של גוף הדף לכחול בהיר.
- הגדר את גודל הגופן של הכותרת (<h1>) ל־5vw (5% מרוחב אזור התצוגה).
הוסף שאילתת @media למסכים שרוחבם המזערי הוא 601px ורוחבם המרבי הוא 1024px:
- הגדר את צבע הרקע של גוף הדף לירוק בהיר.
- הגדר את גודל הגופן של הכותרת (<h1>) ל־3vw (3% מרוחב אזור התצוגה).

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

נסו בעצמכם

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--כתבו את הקוד שלכם כאן-->
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>