וואָס איז אָפּרופיק פּלאַן? (עקספּלאַינער ווידעא און ינפאָגראַפיק)
עס ס גענומען אַ יאָרצענדלינג פֿאַר אָפּרופיק וועב פּלאַן (RWD) צו גיין מיינסטרים זינט קאַמעראָן אַדאַמס ערשטער באַקענענ דער באַגריף אין 2010. דער געדאַנק איז געווען ינדזשיניאַס - פארוואס קענען מיר נישט פּלאַן זייטלעך וואָס אַדאַפּט זיך צו די וויופּאָרט פון די מיטל אויף וואָס עס איז וויוד?
וואָס איז אָפּרופיק פּלאַן?
אָפּרופיק וועב דיזיין איז אַ פּלאַן צוגאַנג וואָס ינשורז אַז אַ וועבזייטל גיט אַן אָפּטימאַל וויוינג דערפאַרונג אויף קיין מיטל, ראַגאַרדלאַס פון די פאַרשטעלן גרייס אָדער האַכלאָטע. עס ינוואַלווז ניצן פלעקסאַבאַל לייאַוץ, גריד-באזירט לייאַוץ און מעדיע קוויריז צו שאַפֿן אַ פּלאַץ וואָס אַדזשאַסטיד צו די גרייס פון דעם עקראַן עס איז וויוד אויף. דעם מיטל אַז אַ וועבזייטל דיזיינד מיט אָפּרופיק וועב פּלאַן וועט קוקן און פונקציאָנירן געזונט אויף אַ דעסקטאַפּ קאָמפּיוטער, אַ טאַבלעט אָדער אַ סמאַרטפאָנע.
אין אנדערע ווערטער, עלעמענטן ווי בילדער קענען זיין אַדזשאַסטיד ווי געזונט ווי די אויסלייג פון די עלעמענטן. דאָ איז אַ ווידעא וואָס דערקלערט וואָס אָפּרופיק פּלאַן איז און וואָס דיין פירמע זאָל ימפּלאַמענינג עס. אויב איר באַקומען אַ נייַ פּלאַץ פּלאַן אָדער וועב אַפּלאַקיישאַן דעוועלאָפּעד, אָפּרופיק וועב פּלאַן איז אַ מוזן, נישט אַן אָפּציע, ווייַל איבער האַלב פון אַלע וועב פאַרקער קומט פון רירעוודיק דעוויסעס וואָס האָבן וועריינג וויופּאָרט ברייט און כייץ.
אָפּרופיק פּלאַן איז אויך אָפּטימאַל פֿאַר וועב דיזיינערז, וואָס טאָן ניט האָבן צו בויען פרייַ יקספּיריאַנסיז וואָס זענען יינציק באזירט אויף די מיטל אָדער וויופּאָרט. אָפּרופיק וועב פּלאַן קענען זיין אַטשיווד מיט קסס.
אָפּרופיק דיזיין CSS Viewport Queries
דאָ איז אַ ביישפּיל פון אַ סטילעשעעט וואָס אַדזשאַסטיד די שריפֿט גרייס באזירט אויף די וויופּאָרט ניצן אַ מידיאַ אָנפֿרעג:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
בראַוזערז זענען זיך-וויסנד פון זייער גרייס און זיי מאַסע די סטילעשעעט פון שפּיץ צו דנאָ. דורך אָנפרעג די אָנווענדלעך סטיילז פֿאַר די גרייס פון דעם עקראַן, איר קענען שטעלן ספּעציפיש סטילינג עלעמענטן פֿאַר יעדער מינימום און מאַקסימום מיטל ברייט. דאָס טוט נישט מיינען אַז איר האָבן צו פּלאַן פאַרשידענע זייטלעך פֿאַר יעדער גרייס פאַרשטעלן, איר נאָר דאַרפֿן צו יבעררוק די עלעמענטן וואָס זענען נויטיק מיט די מידיאַ קוויריז.
אַפּערייטינג מיט אַ רירעוודיק-ערשטער פּסיכאָלאָגיע איז די באַסעלינע נאָרמאַל הייַנט. בעסטער בראַנדז טראַכטן ניט נאָר וועגן צי זייער פּלאַץ איז רירעוודיק, אָבער וועגן די פול קונה דערפאַרונג.
Lucinda Duncalfe, מאָנעטאַטע סעאָ
דאָ ס אַ ינפאָגראַפיק פון געלטיק אילוסטרירן די פּאָטענציעל בענעפיץ פון קריייטינג איין אָפּרופיק פּלאַן פֿאַר קייפל דעוויסעס:
איז דיין פּלאַץ אָפּרופיק?
איין פּשוט וועג צו זען אויב דיין פּלאַץ איז אָפּרופיק איז צו וואַקסן אָדער ייַנשרומפּן דיין בלעטערער פֿענצטער צו זען אויב די עלעמענטן מאַך באזירט אויף די ברייט פון דעם בלעטערער.
פֿאַר מער פּינטלעכקייַט, פונט דיין Google קראָום בלעטערער צו דיין פּלאַץ. אויסקלייַבן View> דעוועלאָפּער> דעוועלאָפּער מכשירים פון די מעניו. דעם וועט לאָדן אַ בינטל פון מכשירים אין אַ טאַפליע אָדער נייַ פֿענצטער. דריקט אויף די קליין ייקאַן צו די לינקס פון די דעוועלאָפּער מכשירים מעניו באַר וואָס קוקט ווי אַ רירעוודיק און טאַבלעט ייקאַן. איר קענען אויסקלייַבן עטלעכע נאָרמאַל דעוויסעס און אפילו טוישן צי איר ווילט צו זען דעם בלאַט כאָריזאַנטאַלי אָדער ווערטיקלי.
איר קענען נוצן די נאַוויגאַציע אָפּציעס צו שפּיץ צו טוישן די מיינונג פון לאַנדשאַפט צו פּאָרטרעט, אָדער אפילו אויסקלייַבן קיין נומער פון פּרעפּראָגראַממעד וויעוופּאָרט סיזעס. איר קען האָבן צו רילאָוד די בלאַט, אָבער דאָס איז די קולאַסט געצייַג אין דער וועלט צו באַשטעטיקן דיין אָפּרופיק סעטטינגס און ענשור אַז דיין פּלאַץ קוקט גרויס אויף אַלע דעוויסעס!