Էլեկտրոնային գաջեթների կողմից սպառվող ինտերնետ տրաֆիկը բառացիորեն ամեն օր ավելանում է: Ժամանակակից օգտվողներին անհրաժեշտ են ռեսուրսներ՝ իրենց համար ամենահարմար ինտերֆեյսով: Նույնը, հարմարվողական դասավորությունը թույլ է տալիս բավարարել այս կարիքը, քանի որ այն թույլ է տալիս ավտոմատ կերպով փոխել վեբ էջերը շարժական սարքերի բնութագրերին:
Ինչ է սա
Արձագանքող դասավորությունը, որը նաև հայտնի է որպես շարժական սարքերի համար հարմարեցված, ներառում է որոշակի գործողություններ՝ ուղղված վեբ էջերի մշակմանը, որոնք կարող են հարմարվել էկրանի տարբեր լուծումներին:
Մի քանի տարի առաջ այս ոլորտում մարդիկ ստիպված էին ստեղծել վեբ էջերի մի քանի տարբերակներ, որպեսզի ռեսուրսը կարողանա պատշաճ կերպով ցուցադրել «ktrnhjyys[' գաջեթները տարբեր պատուհանների բնութագրերով: Այսպես են աշխատել դասավորության դիզայներները մինչև 2010թ. Այնուհետև գաղափարը, թե ինչպես դարձնել կայքը հարմարվողական, կտրուկ փոխվեց: Այնուհետև այս ֆունկցիան կատարելու համար օգտագործվել է ծրագրավորման հատուկ լեզու՝ JavaScript։
Ինչպե՞ս վեբկայքը դարձնել ռեսպոնսիվ բոլոր էկրաններինշարժական սարքեր այսօր? Այժմ դասավորությունն իրականացվում է CCS3 աղյուսակների, ինչպես նաև հատուկ HTML5 լեզվի միջոցով:
Ինչու է ձեզ անհրաժեշտ արձագանքող կայք
- Դուք կարող եք մուտք գործել համացանց՝ օգտագործելով տարբեր էկրանի լուծումներ ունեցող հարմարանքներ: Այսօր մարդիկ օգտագործում են բազմաթիվ տարբեր սարքեր ինչպես կենցաղային կարիքների համար, այնպես էլ ինտերնետից օգտվելու համար: Իհարկե, միևնույն կայքը պետք է ցուցադրվի բարձր որակով և լավ տեսք ունենա տարբեր չափսեր և էկրանի լուծումներ ունեցող սարքերում: Օգտատերերը չպետք է անհարմար զգան որոշակի գաջեթի հետ աշխատելիս:
- Ինտերնետ տրաֆիկի աճ, բջջային հավելվածների և սարքերի ժողովրդականություն. Էլեկտրոնային գաջեթների ներկայիս պահանջարկը, որոնցով դուք կարող եք մուտք գործել ցանց, բավականին ողջամիտ է, և դժվար թե գտնվի մեկը, ով կվիճի այս փաստի հետ: Նման ժողովրդականությունը պարզապես չի կարող անտեսվել, քանի որ այս օգտվողները, հավանաբար, ներկայացնում են ձեր ողջ լսարանի առյուծի բաժինը: Այսպիսով, եթե ցանկանում եք պահպանել ձեր ռեսուրսի այցելուների թիվը նույնը կամ ավելացնել այն, ապա պետք է ուշադիր ուշադրություն դարձնեք նրանց կարիքներին և հետաքրքրություններին: Այլ կերպ ասած, դուք իսկապես պետք է անեք հնարավորը, որպեսզի ձեր կայքի փորձը հնարավորինս հարմար լինի, հակառակ դեպքում ձեր հաճախորդները կարող են պարզապես գնալ ձեր մրցակիցների մոտ:
Շտապ տեղեկատվություն. Եթե ձեր մասնագիտացումը նորությունների և այլ հրատապ տեղեկատվության տրամադրումն է, ապա, իհարկե, օգտագործողին դա կարող է շտապ անհրաժեշտ լինել, ևնա կարող է այդ պահին հեռախոսից բացի ոչինչ ձեռքի տակ չունենա։ Այսպիսով, ձեր խնդիրն է ապահովել, որ նա հնարավորինս արագ կարողանա ստանալ անհրաժեշտ տեղեկատվությունը:
Պատասխանող դասավորության և բջջային հավելվածի համեմատություն
Բոլոր տեսակի ծրագրերն ու կայքերը, որոնք օգտագործում են շարժական տարբերակներ իրենց համապատասխան գաջեթների համար, նույնպես լավ քայլ են, բայց ունեն մի շարք թերություններ:
- Բջջային հավելվածը պետք է անպայման համապատասխանի օպերացիոն համակարգի տեսակին: Իսկ դրա համար պետք է ծախսել ոչ միայն ժամանակ, այլև գումար։
- Ծրագիրը պետք է ներբեռնել: Հավելվածից օգտվելու համար, իհարկե, այն պետք է տեղադրվի։ Իհարկե, օգտատերը կարող է դա անել, բայց միայն այն պայմանով, որ նա հաճախակի կարիք ունենա։ Եթե նա նման կարիք չունի, ապա, ամենայն հավանականությամբ, նա կհրաժարվի այս ձեռնարկումից։ Արդյունքում դուք կկորցնեք ձեր լսարանի զգալի մասը։
Ինչու պետք է լքել հավելվածները
- Երթևեկության բաշխում. Հավելվածի օգտագործումը ցույց չի տալիս ռեսուրսի հաճախելիության մակարդակը: Այսինքն՝ ծրագրի և կայքի թրաֆիկը չի ամփոփվում, ինչը հանգեցնում է ձեզ հետաքրքրող ցուցանիշի նվազմանը։
- Ռեսուրսային նյութերի ինտեգրում. Եթե ձեռք եք բերել հավելված, ապա ստիպված կլինեք լրացուցիչ գումար ծախսել բոլոր նյութերը համաժամեցնելու համար, կամ, լրացնելով կայքը, նաև բովանդակությունը փոխանցել ծրագրին։ Արդյունքում դուք կրկին կորցնում եք ձեր գումարն ու ժամանակը։
Ինչպես դառնալ հարմարվողականկայքի ձևավորում
Առաջին քայլը բոլոր աշխատանքները նախագծելն է: Ընթացքում դիզայները պետք է հմտորեն փոխանցի էությունն ու հիմնական գաղափարները՝ օգտագործելով համեմատաբար փոքր էկրան և միայն մեկ մենյուի սյունակ:
Անհրաժեշտության դեպքում տեղեկատվական բլոկները կրճատվում են, մնում են միայն ամենակարևոր տարրերը: Սկսնակների ուղեցույցը սովորաբար ներառում է՝
- բջջային առաջինը - դիզայն էլեկտրոնային գաջեթների համար;
- ճկուն պատկերներ - օգտագործեք ճկուն պատկերներ;
- ցանցային դասավորություն - օգտագործեք ճկուն ցանցի վրա հիմնված դասավորություններ;
- մեդիա հարցումներ - մշակում մեդիա հարցումներ։
Ինչպե՞ս վեբկայքը դարձնել ռեսպոնսիվ: Դա անելու համար կարող եք օգտագործել դասավորության մի քանի տեսակներ:
- Ռետին. Այս տեսակը հեշտ է իրականացնել, այն հազվադեպ է դժվարություններ առաջացնում նույնիսկ սկսնակների համար: Ռեսուրսի հիմնական բլոկները սեղմվում են այնքան ժամանակ, մինչև նրանք համապատասխանեն բջջային էկրանների չափերին: Եթե սեղմումը հնարավոր չէ, ապա դրանք տեղադրվում են ժապավենի տեսքով։
- Տեղափոխեք բլոկները: Այս տեխնիկան հիանալի կերպով աշխատում է բազմաթիվ սյունակներով ռեսուրսների համար: Լրացուցիչ բլոկների տեղադրումը տատանվում է ըստ էկրանի չափսերի: Եթե էկրանը փոքրանում է, կողային տողերը տեղափոխվում են ներքև:
- Փոխարկեք դասավորությունները: Սա բավականին ժամանակատար տեխնիկա է, որը ներառում է էկրանի յուրաքանչյուր լուծաչափի համար հատուկ ստեղծված դասավորության օգտագործումը: Այս մեթոդը մեծապես հեշտացնում է կայքի ուսումնասիրությունը, սակայն աշխատանքի բարդությունը դարձնում է այն չպահանջված։
- Տարրական դասավորություն. Մեթոդաբանություն, անթերիհարմար է պարզ ռեսուրսների համար: Դիզայները պարզապես չափում է նկարներն ու տպագրությունը։ Թեև այս մեթոդը չի կարելի պահանջված համարել ճկունության բացակայության պատճառով։
- Վահանակներ. Այս տեխնիկան գալիս է բջջային հավելվածներից, որոնցում օժանդակ մենյու կարող է հայտնվել էկրանի ցանկացած դիրքում: Այժմ այս մեթոդը նույնպես շատ տարածված չէ, քանի որ կայքում բջջային նավիգացիան միշտ չէ, որ պարզ է օգտատերերի համար:
Նկարագրված դասավորություններից ոչ մեկը չի կարելի անվանել ունիվերսալ: Ինչպե՞ս վեբ կայքը դարձնել ռեսպոնսիվ: Նախևառաջ պետք է ընտրել համապատասխան դասավորություն՝ կախված նախագծից: Այն պետք է լիովին համապատասխանի ռեսուրսի հնարավորություններին և բավարարի բոլոր կարիքները:
Ինչպես պատրաստել վեբ կայքի ռեսպոնսիվ դասավորություն
Այսօր դրա համար օգտագործվում են CSS3 և HTML5: Առաջին տեխնոլոգիան կասկադային սեղանների առաջադեմ սերունդ է: Նրա օգնությամբ մշակվում են կանոններ, ըստ որոնց կայքի մանրամասները կցուցադրվեն օգտատիրոջ էկրանին։
CSS3-ի օգնությամբ կարող եք սահմանել մի քանի պարամետր՝ զբաղեցրած տարածքի տոկոսը և տարրի չափերը որոշակի լուծաչափով։ Այս տեխնոլոգիայի միջոցով դիզայներները կարող են ստեղծել տարբեր դասեր, որոնք համապատասխանում են որոշակի հատկանիշներին:
HTML5-ն օգտագործվում է որոշակի մանրամասների գտնվելու վայրը նշելու, այլ կերպ ասած՝ էջը նշելու համար: Ստեղծված CSS3 դասերը նշված են HTML թեգերում, որպեսզի օգտագործվող օբյեկտները կարող են փոփոխվել՝ կախված լուծաչափից:
Այսպիսով, ինչպե՞ս պատրաստել html-ով վեբկայքի ռեսպոնսիվ ձևավորում: Դուք պետք է սկսեք մշակել մի պարզ պատկեր, որըապա ձգվել։
Սա ստեղծում է պատկերների մշակման պատյան:
Ինչպե՞ս վեբկայքը դարձնել ռեսպոնսիվ CSS-ով: Սահմանեք հետևյալ պարամետրերը՝
div {
լայնություն՝ 100%;
}
div img {
լայնություն՝ 100%;
բարձրություն՝ ավտոմատ;
}
Այնուհետև, ըստ div-ի լայնությամբ, սահմանեք պատկերի լայնությունը img:
Այսպիսով դուք կստանաք պատկեր, որը կզբաղեցնի ցուցադրման ողջ տարածքը ցանկացած լուծաչափով:
Անհատականացնել առանձին տարրեր
Կայքի վերնագիր: Տեղադրեք մի քանի տարրեր վերնագրի մեջ՝
լոգո -
թաքցնել ընտրացանկի կոճակը -
հիմնական մենյու -
կայքի որոնում -
- Արգելափակել տեքստային բովանդակությամբ: Օգտագործեք տարրը հոդվածը փաթաթելու համար։
- Կողային սյունակ: Օգտագործեք կատեգորիաների ցանկը գտնելու համար, կտտացրեք փոստային ցուցակին և վերջին գրառումներին:
- Ինչպե՞ս ստեղծել հարմարվողական մենյու կայքի համար: Նշման մեջ տարր ավելացրեք: Այս կոդը փոխում է մենյուի բարձրությունը՝ համապատասխանեցնելով բովանդակությունը պահանջվող չափերին։
Ստեղծում ենք մինի-պատկերասրահ
Իմանալով, թե ինչպես պատրաստել html և css պատասխանող վեբկայք, դուք կարող եք լրացնել ձեր ռեսուրսը օգտակար և հետաքրքիր բովանդակությամբ, որը հարմար է ցանկացած գաջեթի, օրինակ՝ մինի պատկերասրահի:
HTML-ում մի քանի նկար ավելացնելու համար օգտագործեք հետևյալ տարրերը՝
Եվ որպեսզի յուրաքանչյուր պատկեր փոխազդի տարբեր լուծումների հետ և փոխի իր չափը, օգտագործեք CSS3:
div.image_gallery {
մարժա՝ 0 ավտոմատ;
լայնություն՝ 1000px;
րոպե լայնությունը՝ 500px;
}
img {
առավելագույն լայնությունը՝ 48%;
լիցք՝ 1%; / թեթև լցոնում պատկերների համար /
}
Վերջ, ձեր մինի-ցուցասրահը պատրաստ է: Այժմ դուք գիտեք, թե ինչպես կարելի է ձեր կայքը պատասխանատու դարձնել տարբեր սարքերի համար:
Ինչպես ստուգել աշխատանքի որակը
- Google Chrome. Բրաուզերում հայտնվելուց հետո սեղմեք F12: Դրանից հետո կբացվի վահանակ՝ կտտացրեք ձեզ հետաքրքրող գաջեթի պատկերակին, օրինակ՝ պլանշետի կամ սմարթֆոնի: Եվ հաջորդ ընտրացանկից ընտրեք պահանջվող լուծաչափը։
- Սարքավորումներ. Ծրագիր, որով կարող եք ստուգել հարմարվողական դասավորությունը՝ բեռնելով կայքը IFrame-ի միջոցով: Այնտեղ կտեսնեք տարբեր լուծումներով սարքերի ցանկ։
- Aresponsivedesign.is. Սա զվարճանքի ռեսուրս է: Նախ, կայքը բեռնվում է IFrame պատուհաններում, այնուհետև տեղափոխվում Apple-ի էկրաններ: Սա շատ հարմար է դարձնում էկրանների սքրինշոթերը:
