קסס מידיאַ קוועריעס: שריט דורך שריט באַשרייַבונג, פֿעיִקייטן און באריכטן

אַמאָל אויף אַ מאָל, די וואס באַזוכן וועבסיטעס צו Smartphones און ענלעך רירעוודיק דיווייסאַז אַז גרונט אנדערע בלויז Laughing. פילע נאָר קען נישט פֿאַרשטיין וואָס דאָס איז נייטיק, ווייַל עס איז אַזאַ אַ באַקוועם דעסקטאַפּ קאָמפּיוטערס! אָדער, אין ערגסט, לאַפּטאָפּס. אין נאך, די רירעוודיק אינטערנעץ דעמאָלט איז געווען טייַער.

צייַט דורכגעגאנגען. אינטערנעט איז געווארן טשיפּער. די פאַרקויף געקומען אויס מער און מער טעלעפֿאָנען און טאַבלאַץ. עטלעכע מאָל שפּעטער, די אָונערז פון פאָלקס זייטלעך פּאַזאַלד סקראַטשינג זיין קאָפּ. לויט צו סטאַטיסטיק, עס ארויס אַז זייער רעסורסן זענען מער מסתּמא צו באַזוכן זייער Smartphones ווי מיט אַ סטיישאַנערי פּיסי!

אין אַז מאָל די זייטלעך האָבן ניט געווען אָפּטימיזעד פֿאַר וויוינג אויף רירעוודיק דעוויסעס. געגאנגען צו די אַלט לעבן אויף דיין טעלעפאָנירן, איר וואָלט האָבן צו זיין צופרידן מיט קליין אותיות, קליין מעניו זאכן און קנעפּלעך ומבאַקוועם.

די אַדווענט פון קסס מידיאַ קוועריעס

עס איז געווען אַ דאַרפֿן צו אָנטאָן רעסורסן אַזוי אַז זיי קוקן גוט ווען וויוד פון קיין פאַרשטעלן. ערשטער פאַרשפּרייטן די פיר פון גרינדן באַזונדער זייטלעך פֿאַר יעדער גרייס. לעמאָשל, וויזאַטערז וואס נוצן אַ רירעוודיק טעלעפאָנירן, איר באַקומען אויף איין מיטל, און איינער וואָס איז "זיצן" מיט דיין קאָמפּיוטער - אויף די אנדערע. אבער עס איז געווען אַ לאַנג, טייַער און ומבאַקוועם.

דערנאך זענען געקומען קסס 3 מידיאַ קוויריז. מיט זיי געקומען די מיר מעגלעכקייט פון די ימפּלאַמענטיישאַן פון דינאַמיש פּלאַן.

וואָס איז דינאַמיש פּלאַן?

דעם טערמין איז געניצט אויב די אויסזען פון די מיטל ענדערונגען לויט צו די גרייס פון דעם עקראַן אויף וואָס עס בראַוזינג. ווי צו פֿאַרשטיין דעם? עס ס פּשוט.

ימאַדזשאַן אַז איר האָט אַ וועבזייַטל. אין זייַן אויבערשטער טייל עס איז אַ נאַוויגאַציע מעניו. האָריזאָנטאַל. עס יקסטענדז איבער די גאנצע ברייט פון די בלאַט. ונטער אַז איז אַ בלאָק מיט קאָנטאַקט אינפֿאָרמאַציע. טעלעפאָן און אַדרעס אויך ספּייסט דורך צוויי בלאַקס און זענען עריינדזשד כאָריזאַנטאַלי שכייניש צו יעדער אנדערער. אונטער דעם בלאָק - דער הויפּט צופרידן, און אויף די לינקס אָדער די רעכט איז די סיידבאַר. ונטער, ווי געוויינטלעך, Footer.

דעם "קלאסישע" אויסלייג דיאַגראַמע. עס איז גאנץ פֿאַר אַ פּערזענלעך קאָמפּיוטער, אָבער ניט צו באַקוועם פֿאַר מאָביל טעלעפֿאָנען. האָריזאָנטאַל מעניו איז אויך ברייט. קאָנטאַקטן זענען ליגן ווייַט פון יעדער אנדערער. צו נוצן אינפֿאָרמאַציע פון די סיידבאַר און אַלע וועלן האָבן צו מעגילע דעם עקראַן, און עס ס 'נישט צו אַלעמען ס געשמאַק.

די פּראָבלעם קענען זיין סאַלווד דורך ניצן אַ אַדאַפּטיוו און רירעוודיק פּלאַן מיט קסס 3 מידיאַ קוויריז. דורך ניצן מידיאַ קוויריז, מיר רעקאָנסטרוירן די אָרט פון די צופרידן ... איצט עס אַרבעט ווי דעם:

• שפּיץ - אַפּאַראַט מיט ווערטיקאַל נאַוויגאַציע מעניו;
• אונטער עס - די בלאָק מיט קאָנטאַקטן, וואָס זענען איצט אויך געשטעלט ווערטיקלי;
• סיידבאַר צופרידן איז ניט געוויזן אויף די זייַט פון <הויפּט> קוויטל צופרידן, און אויבן עס.

דאס איז אַ פּשוט בייַשפּיל פון וואָס קענען ווערן געטאן מיט רעספּאָנסיווע וועב דיזיין מידיאַ קוויריז. אין פאַקט אַ פּלאַץ מער פּאַסאַבילאַטיז.

אזוי וואָס איז די מידיאַ קוויריז?

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

ווי די סיסטעם ונדערסטאַנדס אַז דער דאַרפֿן צו טוישן די צופרידן? עס ניצט מידיאַ קוויריז. זיי ספּעציפיצירן זיכער פּאַראַמעטערס. אויב אַ מיטל פון וואָס אַ גאַסט געקומען צו די פּלאַץ מיץ די פּאַראַמעטערס, כולל פֿאַר-רעצעפּט סטיילז. זיי קענען זיין געשריבן ווי אַ גאַנץ קסס טיש, אָדער אין אַ באַזונדער טעקע.

קסס מידיאַ קוועריעס בלעטערער קאַמפּאַטאַבילאַטי

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

סינטאַקס אַדאַפּטיוו אויסלייג מידיאַ קוועריעס

html. טאָמער איר האָבן שוין יקספּאָוזד צו מידיאַ קוויריז ווען קאָננעקטעד די נוסח טעקע צו HTML. געדענקען אַז שורה? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. <לינק רעל = 'סטילעשעעט' טיפּ = 'טעקסט / קסס' הרעף = הטטפּ: // פּלאַץ /אַרטיקלע/320575/%ע2%80%99סטילע.קסס%ע2%80%99%3ע מאל אין די סוף מוסיף אנדערן פּאַראַמעטער, וואס געקוקט ווי: מידיאַ = 'פאַרשטעלן'.

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

איר קענען נוצן די ווייַטערדיק אַטראַביוץ:

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

אַז ס 'נישט אַלע. , но они используются редко. עס זענען עטלעכע נאָך קסס מידיאַ קוועריעס אַטראַביוץ, אָבער זיי זענען ראַרעלי געניצט. all. אין דערצו, איר טאָן ניט ספּעציפיצירן אַ פּאַראַמעטער - Default אויף אַלע.

די ביניען פון די מידיאַ קוויריז

css. אַנשטאָט פון קריייטינג אַ נוסח טעקע, איר קענען נוצן קסס קאָד. עס קוקט ווי דעם:

(тут будут стили } @מעדיאַ פאַרשטעלן און (מאַקס-ברייט: 1024px) {( עס זענען סטיילז}

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

@מעדיאַ (מאַקס-ברייט: 1024px) {}

אין אַזאַ אַ פאַל, די פּראָפּערטיעס צו ווערן געניצט אויף קיין מיטל, ניט נאָר די וואס זענען יקוויפּט מיט טווס.

ספּעסיפיינג קייפל פּאַראַמעטערס

רעכן איר ווילן צו באַגרענעצן די קייט פון עטלעכע דיווייסיז אַז וועט זיין געוויינט צו קלייַבן די נוסח. px, но не больше 500 px. זאל ס זאָגן איר ווילן צו ווייַזן די פּראָפּערטיעס פון בלויז יענע, וואס באַזוכן דיין פּלאַץ פון אַ Smartphone, די פאַרשטעלן גרייס איז ניט ווייניקער ווי 320 פּקס, אָבער ניט מער ווי 500 פּקס. אין דעם פאַל, די בעטן נעמט די ווייַטערדיק פאָרעם:

@מעדיאַ (מין-ברייט: 320פּקס) און (מאַקס-ברייט: 500פּקס) {}

and. אויב איר זענט באַקאַנט מיט פּראָגראַממינג, איר נדזש וויסן וואָס אָפּעראַטאָר איז געווענדט און. פֿאַר יענע וואס טאָן ניט וויסן: עס טשעקס אויב ביידע באדינגונגען זענען אמת. י אַקטיוואַטיאָן פּראָפּערטיעס אין די אָנפֿרעג פאַרשטעלן זאָל זיין ניט ווייניקער ווי 320 און נישט מער ווי 500 בילדצעלן.

and не ограничивается одним. און נומער פון אָפּערייטערז איז ניט באגרענעצט צו איינער. איר קענען שטעלן זיי ווי פיל ווי איר ווילן. לעמאָשל, פּרובירן צו שאַפֿן אַ זיכער גרייס סקרינז פֿאַר Smartphones און גאַנץ אַנדערש - פֿאַר טווס.

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

אן אנדער טשיקאַווע נואַנס. and вы вполне можете использовать оператор or. אָנשטאָט, און איר זאל געזונט נוצן די אָדער אָפּעראַטאָר. ער דאַרף בייַ מינדסטער איינער צושטאַנד אין די בעטן צו זיין אמת! למשל:

) {} @מעדיאַ (מאַקס-ברייט: 500פּקס) אָדער (אָריענטירונג: פּאָרטרעט) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. אויב דער עקראַן איז ווייניקער ווי 500 פּקס אָדער נוצן פּאָרטרעט אָריענטירונג, די ברייסאַז וועט נעמען ווירקונג סטיילז.

קייוואָרד נישט פֿאַר פייַן-טונינג

not. די מידיאַ אָנפֿרעג, איר קענען טאָן די וואָרט ניט. דעם איז געשען ווי גייט:

@מעדיאַ (ניט מאַקס-ברייט: 700פּקס ) {}

פּראָפּערטיעס זענען אַקטיווייטיד אויב די מאַקסימום ברייט איז ניט גלייַך צו 700 בילדצעלן.

מידיאַ פֿעיִקייטן

די קוויריז קענען ווערן געניצט עטלעכע PRE-געגרינדעט פֿעיִקייטן. W3C. באקענען זיך מיט אַלע איר קענען אָנליין וו 3 ק. רובֿ קאָדערס גענוג צו אייגן די דרייַ הויפּט:

• (о нем мы уже говорили); אָריענטירונג (מיר שוין גערעדט וועגן עס);
• (ширина, ее тоже упоминали); ברייט (ברייט, עס איז אויך דערמאנט);
• (высота). הייך (הייך).

הייך איז ראַרעלי געניצט, אָבער עס זענען אַ ביסל קאַסעס אין וועלכע דעם באַשטעטיקן קען זיין נוצלעך.

ווי און ווו צו שטעלן ריקוועס?

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

דאס איז נישט זייער גוט. פיל מער באַקוועם צו שטעלן פּראָפּערטיעס פֿאַר פאַרשידענע דעוויסעס רעכט נאָך די הויפּט סטיילז. למשל, איר האָבן אַ דיוו, וואָס שטעלן די רויט שריפֿט קאָליר:

div {

קאָליר: רויט;

}

גלייך נאָך די בקשה ינדיקייץ:

@מעדיאַ (מין-ברייט: 320פּקס) {}

פּריסקרייבז פּראַפּערטיז.

אַזאַ אַ צוגאַנג וואָלט זיין קאַמבערסאַם אויב איר זענען ניצן "ריין» קסס. צו די הילף פון די פּרעפּראָסעססאָר. זיי האָבן אַ פּלאַץ פון טשיקאַווע אַפּערטונאַטיז פֿאַר מער פּינטלעך אַפּלאַקיישאַן ריקוועס.

אן אנדער אָפּציע - פּלייסינג פּראָפּערטיעס פֿאַר פאַרשידענע דיווייסאַז אין פאַרשידענע נוסח טעקעס. דאס איז ספּעציעל נוציק אויב איר נוצן אַ פּרעפּראָסעססאָר דירעקטיוו צו אַרייַנפיר. דער רעזולטאַט איז אַ גרינג צו רעדאַגירן, ריין קאָד.

וואָס איינער צו נוצן? עס אַלע דעפּענדס אויף פּערזענלעך פּרעפֿערענצן און קעראַקטעריסטיקס פון די מאַנשאַפֿט. טאָמער, אין דעם אָרט פון דיין אַרבעט האט אַ זיכער וועג פון פּלייסינג מידיאַ קוויריז וועט זיין אנגענומען.

אויך טאָן ניט פאַרגעסן אַז איר קענען פאַרפּאָשעטערן דיין לעבן מיט די לעצט ווייכווארג. עס איז ניט נאָר וועגן די פּרעפּראָסעססאָר. מיט גולפּ גרופּע קסס מידיאַ קוועריעס קענען מאַכן דעם פּראָצעס פיל גרינגער. רעקאַמענדיד צו בעל דעם געצייַג אָדער קיין פון זייַן אַנאַלאָגס.