✔️ @media CSS Style Property

המאפיין @media הכלל @media משמש בשאילתות מדיה כדי להחיל סגנונות שונים עבור סוגי מדיה/מכשירים שונים.

ניתן להשתמש בשאילתות מדיה כדי לבדוק דברים רבים, כגון:

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

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

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

דוגמא:

Demo Panel:

cssguide

CSS: 111

HTML: 222

Syntax:

media not | only mediatype and (mediafeature and | or | not mediafeature) {CSS-Code;}

Valid values:

, and, or, not, only
all, print, screen, speech

Units: px

Js Syntax: element.style.@media

תאימות דפדפנים

תפריט ראשי

מאפייני CSS

✔️ @media CSS Style Property

תאימות דפדפנים