9 טריקים מתקדמות של שאילתת מדיה ב-CSS שכדאי לדעת

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

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

1. תכונת המצביע

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

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

שימוש בתכונת המצביע

אפשרויות לבחירה: 
 אפשרות ראשונה
 אפשרות שניה

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

מחשב שיש לו התקן הצבעה ראשי מדויק (או באיכות גבוהה) יציג את דף האינטרנט הבא:

מחשב שיש לו התקן ראשי עם דיוק מוגבל (או באיכות נמוכה) יציג את דף האינטרנט הבא:

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

2. תכונת כל מצביע

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

שימוש בתכונת כל מצביע

 @media (כל מצביע: בסדר) {
 input[type="radio"] {
 רוחב: 15 פיקסלים;
 גובה: 15 פיקסלים;
 border-radius: 20px;
 רוחב הגבול: 1 פיקסלים;
 }
 }
@media (כל מצביע: גס) {
 input[type="radio"] {
 רוחב: 25px;
 גובה: 25 פיקסלים;
 border-radius: 20px;
 רוחב הגבול: 2 פיקסלים;
 }
 }

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

3. תכונת הריחוף

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

שימוש בתכונת הרחף

 /* CSS */
 א{
 קישוט טקסט: אין;
 צבע שחור;
 }
 @media (רחף: רחף) {
 a: hover {
 צבע כחול;
 }
 }
 HTML 
 אלמנט קישור

הקוד שלמעלה יציג אֵלֵמֶנט. הוא ישנה צבע (משחור לכחול) בכל פעם שמנגנון הקלט הראשי של מכשיר (תומך בריחוף) ירחף מעליו.

4. תכונת כל ריחוף

ה כל-רחף שאילתת מדיה מכוונת לכל מנגנון קלט, כולל מנגנון הקלט הראשי.

שימוש בתכונת כל ריחוף

@media (כל-רחף: רחף) {
 a: hover {
 צבע כחול;
 }
 }

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

5. תכונת הרזולוציה

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

תכונת הרזולוציה משתמשת בטווח. זה אומר שכמו כן השימוש ב- פתרון הבעיה מילת מפתח, אתה יכול להשתמש רזולוציה מינימלית ו רזולוציה מקסימלית. תכונת רזולוציית שאילתת המדיה שייכת לסוג נתוני הרזולוציה. המשמעות היא שתכונת הרזולוציה ניתנת למדידה באחת משלוש יחידות: נקודות לאינץ' (dpi), נקודות לסנטימטר (dpcm), או נקודות לפיקסלים (dppx).

שימוש בתכונת הרזולוציה

/* CSS */
@media (רזולוציה מינימלית: 72dpi) {
 p {
 צבע לבן;
 צבע רקע: כחול;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

הרזולוציה הנמוכה ביותר שיכולה להיות למכשיר ועדיין להציג תמונות באיכות היא 72dpi. לכן, אם למכשיר יש רזולוציה של 72dpi או יותר, הוא יציג את הפלט הבא בדפדפן שלו:

6. תכונת ההתמצאות

נקודת מבט של מכשיר יכולה להיות רק אחת משתי כיוונים: דְיוֹקָן אוֹ נוֹף. כדאי לשים לב שכיוון נקודת מבט שונה מכיוון מכשיר. אם מכשיר משתמש במקלדת רכה, יציאת התצוגה שלו עשויה להשתנות מדיוקן לרוחב כשהמכשיר עצמו עדיין במצב לאורך.

שימוש בתכונת הכיוון

/* CSS */
 גוּף{
 תצוגה: flex;
 }
 סָעִיף{
 גבול: 2px כחול מלא;
 ריפוד: 3 פיקסלים;
 שוליים: 3px;
 }
 @media (כיוון: לרוחב) {
 גוף {
 flex-direction: שורה;
 }
 }
@media (כיוון: פורטרט) {
 גוף {
 flex-direction: עמודה;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

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

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

מכשיר עם נקודת מבט במצב דיוקן יציג את דף האינטרנט הבא:

7. תכונת הגובה

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

שימוש בתכונת הגובה

 /* CSS */
 @media (מינימום גובה: 360px) {
 p{
 גבול: 2 פיקסלים מנוקד כתום אדום;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

הקוד שלמעלה מתאים אישית את מה שמשתמש רואה בהתבסס על גובה המכשיר שלו. משתמשים עם גובה מכשיר של 360 פיקסלים ומעלה יראו משהו דומה לדף האינטרנט הבא:

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

8. תכונת הרוחב

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

שימוש בתכונת הרוחב

 /* CSS */
 @media (רוחב מינימלי: 600px) {
 p{
 גבול: 2px סגול מלא;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

הקוד שלמעלה מתאים אישית את מה שמשתמש רואה בהתבסס על רוחב המכשיר שלו. משתמשים ברוחב מכשיר של 600 פיקסלים ויותר יראו משהו כמו דף האינטרנט הבא:

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

9. תכונת הצבע

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

תכונת הצבע משתמשת גם ב- מיני-צבע ו מקסימום-צבע טווחים.

שימוש בתכונת הצבע

 /* CSS */
 @media (מיני-צבע: 7) {
 p{
 גבול: 2 פיקסלים ירוק אחיד;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

מכשירים עם רכיב צבע של שבעה ומעלה יציגו את הפלט הבא בדפדפנים שלהם:

עכשיו אתה יכול ליצור חוויות משתמש ייחודיות

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

שאילתות מדיה הן לא כלי ה-CSS היחידים שיכולים לחזק את כישורי המפתחים שלך.

8 טיפים וטריקים חיוניים ל-CSS שכל מפתח צריך לדעת

קרא הבא

על הסופר