ווי טאָן איר שרייב CSS Media Queries?

דער סינטאַקס פֿאַר ביידע מינ-ברייט און מאַקס-ברייט מידיאַ קוויריז

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

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

מעדיע קוועריעס אין אַקשאַן

אַזוי ווי טאָן איר נוצן Media Queries אויף אַ וועבזייַטל? דאָ איז אַ זייער פּשוט בייַשפּיל:

  1. איר וואָלט אָנהייבן מיט אַ געזונט-סטראַקטשערד HTML דאָקומענט פֿרייַ פון קיין וויסואַל סטיילז (וואָס איז וואָס קסס איז פֿאַר)
  2. אין דיין קסס טעקע, איר וואָלט אָנהייבן ווי איר נאָרמאַלי טאָן דורך סטילינג די בלאַט און באַשטעטיקן אַ באַסעלינע פֿאַר ווי דער וועבזייַטל וועט קוקן. זאָגן איר געוואלט די שריפֿט גרייס פון דער בלאַט צו זיין 16 בילדצעלן, איר קען שרייַבן דעם קסס: body {font-size: 16px; }
  3. איצט, איר קען וועלן צו פאַרגרעסערן אַז שריפֿט גרייס פֿאַר גרעסערע סקרינז אַז האָבן אַ פּלאַץ פון גרונטייגנס צו טאָן אַזוי. דאס איז ווו Media Queries kick in. איר וואָלט אָנהייבן אַ מעדיאַ קווערי ווי דאָס: @ מעדיע פאַרשטעלן און (מינ-ברייט: 1000 פּקס) {}
  4. דאָס איז דער סינטאַקס פון אַ מעדיע קווערי. עס הייבט זיך מיט @ מעדיע צו שאַפֿן די מעדיע קווערי זיך. ווייַטער איר שטעלן די "מעדיע טיפּ", וואָס אין דעם פאַל איז "פאַרשטעלן". דעם אַפּלייז צו דעסקטאַפּ קאָמפּיוטער סקרינז, טאַבלאַץ, פאָנעס, אאז"וו צום סוף, איר ענדיקן דעם מעדיאַ קווערי מיט די "מידיאַ שטריך". אין אונדזער בייַשפּיל אויבן, דאָס איז "מיד-ברייט: 1000 פּקס". דעם מיטל אַז דער מעדיע קווערי וועט בריק אין פֿאַר דיספּלייז מיט אַ מינימום ברייט פון 1000 פּיקסעלס ברייט.
  1. נאָך די יסודות פון דער מעדיע קווערי, איר שטעלן אַן עפן און קלאָוזינג קערל בראַסע ענלעך צו וואָס איר וואָלט טאָן אין אַלע נאָרמאַל קסס הערשן.
  2. די לעצט שריט צו אַ מעדיע קווערי איז צו לייגן די קסס כּללים וואָס איר ווילן צו צולייגן אַמאָל דעם צושטאַנד איז באגעגנט. איר שטעלן די CSS כּללים צווישן די געגרייַזלט באַפריז וואָס מאַכן די מעדיע קווערי ווי דאָס: @מעדיאַ פאַרשטעלן און (מינימום ברייט: 1000 פּקס) {גוף {שריפֿט-גרייס: 20 פּקס; }
  3. ווען די באדינגונגען פון די מעדיאַ קווערי זענען באגעגנט (דער בלעטערער פֿענצטער איז בייַ מינדסטער 1000 פּיקסעלס ברייט), דעם CSS נוסח וועט נעמען ווירקונג, טשאַנגינג אונדזער פּלאַץ ס שריפֿט גרייס פון די 16 בילדצעלן וואָס מיר האָבן געגרינדעט יקערדיק צו אונדזער נייַ ווערט פון 20 פּיקסעלס.

אַדדינג מער סטיילז

איר קען שטעלן ווי פילע קסס כּללים ין דעם מעדיע קווערי ווי דארף צו סטרויערן די וויזשאַוואַל אויסזען דיין וועבזייַטל. למשל, אויב איר ווילט נישט בלויז פאַרגרעסערן די שריפֿט-גרייס צו 20 פּיקסעלס, אָבער אויך טוישן די קאָליר פון אַלע פּאַראַגראַפס צו שוואַרץ (# 000000), איר קען לייגן דעם:

@מעדיאַ פאַרשטעלן און (מינימום ברייט: 1000 פּקס) {גוף {שריפֿט-גרייס: 20 פּקס; } p {color: # 000000; }}

לייגן מער מעדיע קוועריעס

דערצו, איר קענען לייגן מער מעדיע קוועריעס פֿאַר יעדער גרעסערע סיזעס, צולייגן זיי צו דיין נוסח בלאַט אַזאַ ווי:

@מעדיאַ פאַרשטעלן און (מינימום ברייט: 1000 פּקס) {גוף {שריפֿט-גרייס: 20 פּקס; } p {color: # 000000; {} @media screen און (min-width: 1400px) {body {font-size: 24px; }}

דער ערשטער מידיאַ קוועריעס וואָלט בריק אין 1000 פּיקסעלס ברייט, טשאַנגינג די שריפֿט גרייס צו 20 פּיקסעלס. דערנאך, אַמאָל דער בלעטערער איז אויבן 1400 בילדצעלן, די שריפֿט גרייס וואָלט ווידער טוישן צו 24 פּיקסעלס. איר קען לייגן ווי פילע מעדיע קוועריעס ווי דארף פֿאַר דיין באַזונדער וועבזייַטל.

מינט-ברייט און מאַקס-ברייט

עס זענען בכלל צוויי וועגן צו שרייַבן מידיאַ קוועריעס - ניצן "מין-ברייט" אָדער מיט "מאַקס-ברייט". אַזוי ווייַט, מיר האָבן געזען "מין-ברייט" אין קאַמף. דאס זייַנען די מעדיע קוועריעס צו נעמען ווירקונג, אַמאָל אַ בלעטערער איז ריטשט בייַ מינדסטער אַז מינימום ברייט. אַזוי אַ אָנפֿרעג וואָס ניצט "מינ-ברייט: 1000 פּקס" וועט זיין געווענדט ווען דער בלעטערער איז לפּחות 1000 פּיקסעלס ברייט. דעם נוסח פון מידיאַ קווערי איז געניצט ווען איר זענט בנין אַ פּלאַץ אין אַ "רירעוודיק-ערשטער" שטייגער.

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

וועגן עלטערע בראַוזערז

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

Edited by Jeremy Girard on 1/24/17