ווי פּערסענטידזשיז אַרבעט פֿאַר ברייט קוואלן אין אַ רעספּאָנסיווע וועבזייַטל

לערן ווי וועב בראַוזערז באַשליסן אַ אַרויסווייַזן ניצן פּראָצענט וואַלועס

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

ניצן פּיקסעלס פֿאַר ברייט ווערט

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

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

  1. א פליסיק גריד
  2. פליסיק מידיאַ
  3. מעדיע קוויריז

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

ניצן פּערסענטידזשיז פֿאַר ברייט ווערט

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

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

אויב אַ בילד איז נאַטיוועלי 600 פּיקסעלס ברייט, דעמאָלט ניצן אַ CSS ווערט צו ווייַזן עס בייַ 50% טוט נישט מיינען אַז עס וועט זיין 300 פּיקסעלס ברייט אין די וועב בלעטער. דעם פּראָצענט ווערט איז קאַלקיאַלייטאַד באזירט אויף די עלעמענט וואָס כּולל דעם בילד, ניט די געבוירן גרייס פון די בילד זיך. אויב דער קאַנטיינער (וואָס קען זיין אַ טייל אָדער עטלעכע אנדערע HTML עלעמענט) איז 1000 פּיקסעלס ברייט, דער בילד וועט אַרויסווייַזן בייַ 500 פּיקסעלס זינט דעם ווערט איז 50% פון די קאַנטיינער ס ברייט. אויב דער מיט עלעמענט איז 400 פּיקסעלס ברייט, די בילד וועט ווייַזן בלויז בייַ 200 בילדצעלן, ווייַל דאָס איז 50% פון די קאַנטיינער. דער בילד אין קשיא דאָ האט אַ 50% גרייס וואָס דעפּענדס גאָר אויף דעם עלעמענט וואָס כּולל עס.

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

פּערספּענאַגעס באַזירט אויף אנדערע פּערסענטידזשיז

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

דאָ ס אנדערן בייַשפּיל וואָס ווייזט דעם אין פיר.

זאָגן איר האָבן אַ פּלאַץ ווו די גאנצע פּלאַץ איז קאַנטיינד ין אַ אָפּטייל מיט אַ קלאַס פון "קאַנטיינער" (אַ פּראָסט וועב פּלאַן פיר). ין די אָפּטייל זענען דרייַ אנדערע דיוויזשאַנז אַז איר וועט יווענטשאַוואַלי נוסח צו אַרויסווייַזן ווי 3 ווערטיקאַל שפאלטן. אַז HTML זאל קוקן ווי דאָס:

איצט, איר קען נוצן CSS צו שטעלן די גרייס פון דעם "קאַנטיינער" אָפּטיילונג צו זאָגן 90%. אין דעם בייַשפּיל, די קאַנטיינער טייל טוט נישט האָבן אן אנדער עלעמענט וואָס ינווייראַנמז עס נאָר ווי די גוף, וואָס מיר האָבן נישט שטעלן צו קיין ספּעציפיש ווערט. דורך פעליקייַט, די גוף וועט פאָרשטעלן ווי 100% פון די בלעטערער פֿענצטער. דעריבער, דער "קאַנטיינער" אָפּטיילונג פּראָצענט וועט זיין באזירט אויף די גרייס פון דעם בלעטערער פֿענצטער. ווי אַז בלעטערער פֿענצטער ענדערונגען אין גרייס, אַזוי וועט די גרייס פון דעם "קאַנטיינער". אַזוי אויב דער בלעטערער פֿענצטער איז 2000 בילדצעלן ברייט, דעם אָפּטיילונג וועט אַרויסווייַזן אין 1800 בילדצעלן. דעם איז קאַלקיאַלייטאַד ווי 90 פּראָצענט פון 2000 (2000 רענטגענ .90 = 1800)), וואָס איז די גרייס פון דעם בלעטערער.

אויב יעדער איינער פון די "קאָל" דיוויזשאַנז געפונען ין דער "קאַנטיינער" זענען שטעלן צו אַ גרייס פון 30%, און יעדער פון זיי וועט זיין 540 פּיקסעלס ברייט אין דעם בייַשפּיל. דעם איז קאַלקיאַלייטאַד ווי 30% פון די 1800 בילדצעלן אַז די קאַנטיינער רענדערז בייַ (1800 x .30 = 540). אויב מיר געביטן דעם פּראָצענט פון דעם קאַנטיינער, די ינער דיוויזשאַנז וואָלט אויך טוישן אין די גרייס זיי ופפירן, זינט זיי זענען אָפענגיק אויף וואָס אַנטהאַלטן עלעמענט.

זאל אונדז באַטראַכטן אַז דער בלעטערער פֿענצטער בלייבט בייַ 2000 פּיקסעלס ברייט, אָבער מיר טוישן דעם פּראָצענט ווערט פון דעם קאַנטיינער צו 80% אַנשטאָט פון 90%. אַז מיטל אַז עס וועט פאָרשטעלן 1600 פּיקסעלס ברייט איצט (2000 רענטגענ .80 = 1600). אפילו אויב מיר טאָן ניט טוישן די קסס פֿאַר די גרייס פון אונדזער 3 "קאָל" דיוויזשאַנז, און לאָזן זיי בייַ 30%, זיי וועלן פאָרשטעלן דיפערענטלי איצט זינט זייער מיט עלעמענט, וואָס איז די קאָנטעקסט אַז זיי זענען סייזד דורך, האט געביטן. די 3 דיוויזשאַנז וועלן איצט פאָרשטעלן ווי 480 פּיקסעלס ברייט יעדער, וואָס איז 30% פון 1600, אָדער די גרייס פון דעם קאַנטיינער (1600 x .30 = 480).

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

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

אין סאַמערי

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