Քանի տոկոսը աշխատում է պատշաճ կայքէջում լայնությունների հաշվարկների համար

Իմացեք, թե ինչպես վեբ բրաուզերները որոշում են դրսեւորում, օգտագործելով տոկոսային արժեքներ

Հաճախակի վեբ դիզայնի շատ ուսանողներ ծանր ժամանակներ ունեն, օգտագործելով լայնությունների արժեքների տոկոսներ: Մասնավորապես, կա շփոթություն, թե ինչպես է բրաուզերը հաշվարկում այդ տոկոսները: Ստորեւ դուք կգտնեք մանրամասն բացատրություն, թե որքան տոկոսներ են աշխատում լայնածավալ հաշվարկները պատասխանող կայքում:

Օգտագործելով Pixels լայնության արժեքների համար

Երբ օգտագործեք պիքսելները որպես լայնության արժեք, արդյունքները շատ պարզ են: Եթե ​​CSS- ից օգտվում եք փաստաթղթի վերնագրի տարրերի լայնության արժեքը 100 պիքսել լայնությամբ, ապա այդ տարրը կլինի նույն չափը, որը դուք սահմանել եք 100 պիքսել լայն `կայքի բովանդակության կամ ստորագիր կամ այլ ոլորտներում: էջը: Պիքսելները բացարձակ արժեք են, ուստի 100 պիքսել է 100 փիքսել, անկախ նրանից, որտեղ ձեր փաստաթղթում հայտնվում է տարր: Ցավոք, երբ հասկանալի հասկացությունը կարող է հասկանալ, նրանք լավ չեն աշխատում արձագանքող կայքերում:

Ethan Marcotte- ը զետեղել է «պատասխանատու վեբ դիզայն» տերմինը, բացատրելով այս մոտեցումը որպես 3 հիմնական սկզբունքներ.

  1. Մի հեղուկ ցանց
  2. Հեղուկային լրատվամիջոցներ
  3. ԶԼՄ - ների հարցումներ

Այդ առաջին երկու կետերը, հեղուկ ցանցը եւ հեղուկ լրատվամիջոցները, ձեռք են բերվում արժեքներ օգտագործելու համար օգտագործելով պիքսելների փոխարեն տոկոսներ:

Օգտագործելով տոկոսի արժեքների տոկոսը

Երբ դուք օգտագործում եք տոկոսներ, տարրերի համար լայնություն ստեղծելու համար, այն տարրը, որը ցուցադրում է տվյալ տարրը, կախված է այն բանից, թե որտեղ է գտնվում փաստաթղթում: Տոկոսները հարաբերական արժեք են, այսինքն, ցուցադրված չափը համեմատվում է ձեր փաստաթղթում գտնվող այլ տարրերի հետ:

Օրինակ, եթե պատկերն ընդլայնեք մինչեւ 50%, դա չի նշանակում, որ պատկերը կցուցադրվի նորմայի չափով: Սա ընդհանուր սխալ պատկերացում է:

Եթե ​​պատկերը բնօրինակը 600 պիքսել լայն է, ապա CSS- ի արժեքը ցուցադրելու համար այն 50% -ով չի նշանակում, որ դա վեբ բրաուզերում կլինի 300 պիքսել լայն: Այս տոկոսային արժեքը հաշվարկվում է այն պատկերով, որը պարունակում է այդ պատկերը, ոչ թե պատկերի բնօրինակը: Եթե ​​կոնտեյները (որը կարող է բաժանել կամ որեւէ այլ HTML տարր) 1000 պիքսել լայնություն է, ապա պատկերը կցուցադրվի 500 պիքսել, քանի որ այդ արժեքը կոնտեյների լայնության 50% -ն է: Եթե ​​պարունակող տարրը 400 պիքսել լայն է, ապա պատկերը միայն 200 պիքսել է, քանի որ այդ արժեքը կոնտեյների 50% -ն է: Այստեղ պատկերվածը ունի 50% չափ, որը ամբողջովին կախված է այն տարրից, որը պարունակում է այն:

Հիշեք, որ պատասխանատու դիզայնը հեղուկ է: Դիզայնը եւ չափերը կփոխվեն, քանի որ էկրանի չափը / սարքը փոխվում է : Եթե ​​կարծում եք, որ դա ֆիզիկական, ոչ-վեբ ենթակառուցվածքների առումով, նման է ստվարաթղթե տուփի, որը դուք լրացնում եք փաթեթավորման նյութով: Եթե ​​դուք ասում եք, որ տուփը պետք է կցված լինի այդ նյութի կեսին, ապա ձեզ հարկավոր է փաթեթավորման գումարը կախված վանդակի չափից: Նույնը վերաբերում է վեբ դիզայնի տոկոսային լայնությանը:

Այլ տոկոսների հիման վրա տոկոսներ

Պատկերի / բեռնարկղի օրինակով, ես օգտագործում էի պիքսելային արժեքներ պարունակող տարրի համար `ցույց տալու, թե ինչպես արձագանքող պատկերը կցուցադրվի: Իրականում, պարունակող տարրը նույնպես սահմանվում է մի տոկոս եւ այդ կոնտեյների ներսում պատկեր կամ այլ տարրեր կստանան իրենց արժեքները տոկոսի տոկոսի հիման վրա:

Ահա եւս մեկ օրինակ, որը ցույց է տալիս դա գործնականում:

Ասեք, որ ունեք կայք, որտեղ ամբողջ կայքը պարունակում է «կոնտեյներ» դասի բաժին (ընդհանուր վեբ դիզայնի պրակտիկա) բաժնում: Այդ բաժանման մեջ են երեք այլ բաժիններ, որոնք, ի վերջո, ոճով կցուցադրեն որպես 3 ուղղահայաց սյունակ: HTML- ը կարող է նման լինել.

Այժմ դուք կարող եք օգտագործել CSS- ը `այդ« կոնտեյներային »բաժնի չափը սահմանելու համար` 90%: Այս օրինակում կոնտեյների բաժինը չունի այլ տարր, որը շրջապատում է այն, քան մարմինը, որը մենք չենք սահմանել որեւէ կոնկրետ արժեք: Նախատեսվում է, որ մարմինը դիտարկիչի պատուհանի 100% -ը կտա: Հետեւաբար, «կոնտեյներային» բաժանման տոկոսը հիմնված կլինի դիտարկիչի պատուհանի չափի վրա: Քանի որ զննարկիչի պատուհանի չափը փոփոխվում է, այնպես էլ այդ «կոնտեյների» չափը: Այսպիսով, եթե զննարկիչի պատուհանը 2000 պիքսել լայն է, ապա այս բաժինը կցուցադրվի 1800 պիքսել: Սա հաշվարկվում է որպես 2000-ի 90 տոկոսը (2000 x .90 = 1800)), որը բրաուզերի չափն է:

Եթե ​​«կոնտեյների» մեջ գտնված «կողային» ստորաբաժանումներից յուրաքանչյուրը սահմանվում է 30% չափի, ապա դրանցից յուրաքանչյուրը կլինի այս 540 փիքսել լայնությունը: Սա հաշվարկվում է որպես 1800 պիքսելների 30%, որ կոնտեյնը մատուցում է (1800 x .30 = 540): Եթե ​​մենք փոխեցինք այդ կոնտեյների տոկոսը, ապա այդ ներքին բաժինները նույնպես կփոխվեին այն չափով, որ նրանք ցույց են տալիս, քանի որ կախված են այդ տարրերից:

Ենթադրենք, որ զննարկիչի պատուհանները մնում են 2000 պիքսել լայնությամբ, սակայն մենք փոխում ենք կոնտեյների տոկոսային արժեքը մինչեւ 90% -ի փոխարեն 80%: Դա նշանակում է, որ այն ներկայացնել 1600 պիքսել լայնությամբ (2000 x .80 = 1600): Նույնիսկ եթե մենք չենք փոխում CSS- ը մեր 3 «կուռ» բաժանմունքների չափի համար եւ թողնենք դրանք 30% -ով, նրանք այլ կերպ կվարվեն, քանի որ դրանց պարունակող տարրը, որը համատեքստն է, որ չափվում է, փոխվել է: Այդ երեք ստորաբաժանումները ներկայումս կտան 480 փիքսել լայնությամբ, ինչը 1600-ի 30 տոկոսն է կամ կոնտեյների չափը (1600 x .30 = 480):

Հաշվի առնելով այս ամենը, եթե նույնիսկ այդ «կուռ» ստորաբաժանումներից մեկի ներսում պատկերի գոյություն է դրսեւորվել, եւ այդ պատկերը չափվել է տոկոսով, դրա չափման համատեքստը «կուռը» կլինի: Քանի որ «կույտ» բաժինը չափով փոխվեց, այդպիսով կլիներ պատկերը ներսում: Այսպիսով, եթե բրաուզերի կամ «կոնտեյների» չափը փոխվել է, ապա դա կազդի երեք «կուռ» բաժանմունքների վրա, որոնք, իր հերթին, փոխում են «կուռ» ներսում պատկերի չափը: Ինչպես տեսնում եք, դրանք բոլորը կապված են դա վերաբերում է տոկոսային հաշվարկային արժեքներին:

Երբ հաշվի եք առնում, թե ինչպես է վեբ էջի ներդիրը դրսեւորել, երբ տոկոսային արժեքը օգտագործվում է իր լայնության համար, դուք պետք է հասկանաք այն համատեքստը, որով այդ տարրը տեղակայված է էջի շեղման մեջ:

Արդյունքում

Տոկոսները կարեւոր դեր են խաղում արձագանքող կայքերին դասավորելու համար: Անկախ նրանից, թե դուք պատասխանում եք նկարներ, կամ օգտագործելով տոկոսային լայնություններ, որպեսզի իսկապես հեղուկ ցանց ստեղծեք, որի չափերը հարաբերական են միմյանց նկատմամբ, հասկանալով այդ հաշվարկները անհրաժեշտ կլինի հասնել ձեր ցանկությանը: