שאילתות CSS: צעד אחר צעד תיאור, תכונות ביקורות

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

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

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

הופעתו של CSS מדיה שאילתות

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

ואז הגיע CSS3 Media שאילתות. ואיתם באו גם עצם האפשרות של יישום עיצוב דינמי.

מהו עיצוב דינמי?

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

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

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

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

• יחידה עם תפריט ניווט אנכי - עליונה;
• מתחתיה - הבלוק עם אנשי קשר, אשר כעת ממוקמים גם אנכית;
• תוכן הצידי אינו מוצג בצד של תוכן תג <ראשי>, ומעליו.

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

אז מה הוא בשאילתות המדיה?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. תחת CSS מדיה שאילתות CSS3 להבין את מודול טווח, שבה אתה יכול להפוך את התוכן של הדף כדי להסתגל לתנאים מסוימים. לדוגמה, זה מתחיל להגיב על גודל המסך, או מכשיר האוריינטציה (לאורך / לרוחב).

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

תאימות דפדפן שאילתות CSS

Safari до Chrome. כל הדפדפנים המודרניים תומכים בטכנולוגיה זו, מ- Safari ל- Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. כמובן, משתמשים של גרסאות ישנות יותר של אינטרנט אקספלורר יש בעיה ... אבל בואו נודה בזה בכנות - מי עדיין משתמש המבוגר IE, כמעט כל דבר יכול לגרום לבעיות.

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

html. אולי אתה נחשפת שאילתות המדיה כאשר הוא מחובר הקובץ לסגנון של HTML. זכור קו זה? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // האתר /article/320575/%E2%80%99style.css%E2%80%99%3E לפעמים בסוף מוסיף פרמטר אחר, שנראה כמו: "מסך" = תקשורת.

זוהי שאילתת מדיה! הוא מציין כי הקובץ בסגנון שצוין יפעל במכשירי המצוידים בטלוויזיות. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. במקום זאת, אתה יכול לציין הדפסת מסך - במקרה זה, את הסגנונות של הקובץ מוחלים, אם הדף מודפס.

אתה יכול להשתמש בתכונות הבאות:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; כל - גרסה אוניברסלית, בשימוש על ידי שתיקה, מוחלת בכל המקרים;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - מסך (מחשבים, מחשבים ניידים, טאבלטים, טלפונים חכמים, וכל זה מצויד בצג);
• принтеры; הדפסה - מדפסות;
• – проекторы; הקרנה - מקרן;
• – речевые браузеры; דיבור - דפדפני דיבור;
• – для устройств для слабовидящих; ברייל - מכשירים עבור לקויי ראייה;
• – для экранов телевизоров. טלוויזיה - על מסכי הטלוויזיה.

וזה לא הכל. , но они используются редко. ישנן מספר CSS נוספת מדיה השאילתות מייחסות, אך הם משמשים לעתים נדירות. all. בנוסף, לא תציין פרמטר - מחדל בכל.

מבנה בשאילתות מדיה

css. במקום ליצור קובץ סגנון, אתה יכול להשתמש בקוד CSS. זה נראה כך:

(тут будут стили } מסך @media ו (רוחב מקסימום: 1024px) {( ישנם סגנונות}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. לאחר הנחית @media, אשר מבהירה כי שאילתא התקשורת משמשת, יש אינדיקציה על סוג ההתקן (מסך - המסך) ופרמטרים נוספים. Max Width. בדוגמה זו, להשתמש בנכס מקס רוחב שאילתות CSS. px. משמעות הדבר היא כי סגנונות הרשומים בסוגריים יהיה מעורב, אם המשתמש של לגודל המסך של המכשיר מ px 1024. и and не обязательны. מסך ולא מחייב. אתה יכול לכתוב את זה:

@media (max-width: 1024px) {}

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

ציון פרמטרים מרובים

נניח שאתה רוצה להגביל את הטווח של מספר מכשירים אשר ישמשו כדי לבחור את הסגנון. px, но не больше 500 px. נניח שאתה רוצה להראות את המאפיינים של רק מי שמבקר באתר שלך מטלפון חכם, גודל המסך הוא לא פחות מ 320 פיקסלים, אבל לא יותר מ 500 פיקסלים. במקרה כזה, הבקשה לוקחת את הטופס:

@media (min-width: 320px) ו (רוחב מקסימום: 500 פיקסלים) {}

and. אם אתה מכיר את התכנות, אתה NJ יודע מה מפעיל מוחל. לאלו שלא יודעים: הוא בודק אם שני התנאים מתקיימים. מאפייני הפעלת E. במסך השאילתה צריכים להיות לא פחות מ 320 ולא יותר מ 500 פיקסלים.

and не ограничивается одним. ומספר המפעילים אינו מוגבל אחד. אתה יכול לשים אותם כמה שאתה רוצה. לדוגמה, לנסות ליצור מסכי גודל מסוים עבור טלפונים חכמים שונים למדי - עבור טלוויזיות.

נקודה חשובה - את הכיוון של מכשיר המשתמש. מישהו הגולשים באתרים בסמארטפון שלך בכיוון לאורך, מישהו - עם הנוף. orientation:portrait, для вторых, соответственно, orientation:landscape. לקבלת לשעבר, תצטרך אוריינטציה תנאי נוסף: דיוקן, עבור השני, בהתאמה, אוריינטציה: הנוף. @media. קווים אלה מוצגים גם בסוגריים הבאים @media צוות. and. אתה יכול לשתף אותם באמצעות ו.

עוד ניואנס מעניין. and вы вполне можете использовать оператор or. במקום, ואתה יכול גם להשתמש או מפעיל. הוא צריך לפחות תנאי אחד בבקשה להיות אמיתי! לדוגמה:

) {} @media (max-width: 500px) או (אוריינטציה: דיוקן) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. אם המסך הוא פחות מ 500 פיקסלים בכיוון לאורך או שימוש, הפלטות תיקחנה סגנונות השפעה.

מילות לא כיוון עדין

not. שאילתא התקשורת, אתה יכול להכניס את המילה לא. הדבר נעשה באופן הבא:

@media (לא-רוחב מקסימום: 700px ) {}

מאפיינים מופעלים אם הרוחב המקסימאלי הוא לא שווה 700 פיקסלים.

תכונות מדיה

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

• (о нем мы уже говорили); האוריינטציה (כבר דיברנו על זה);
• (ширина, ее тоже упоминали); (רוחב, הוא הזכיר גם);
• (высота). גובה (גובה).

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

איך והיכן למקם בקשות?

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

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

div {

צבע: אדום;

}

מייד לאחר הבקשה מציינת:

@media (min-width: 320px) {}

קובע מאפיינים.

גישה כזו תהיה מסורבלת אם אתה משתמש "css» טהור. לעזרה בעיבוד המוקדמת. יש להם הרבה הזדמנויות מעניינות עבור בקשות יישום מדויקות יותר.

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

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

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