Ձեր կայքը նախագծելիս կարևոր է համոզվել, որ այն հիանալի տեսք ունի ցանկացած սարքի վրա ՝ անկախ էկրանի չափից և ձևից: Արձագանքող կայքերը նախագծված են լավ տեսք ունենալու բոլոր տեսակի ժամանակակից սարքերում, ինչպիսիք են համակարգիչները, հեռախոսները, պլանշետները, հեռուստացույցները, կրելի սարքերը և նույնիսկ մեքենայի էկրանները: Կայքն արձագանքելու համար ձեզ հարկավոր է փոփոխել ձեր CSS և HTML ծածկագիրը ՝ դրա տարրերի ավտոմատ չափափոխման համար ՝ կախված կոնկրետ պայմաններից: Այս wikiHow- ը սովորեցնում է ձեզ, թե ինչպես պլանավորել և իրականացնել հիմնական պատասխանատու վեբ դիզայն:
Քայլեր
Մեթոդ 1 -ից 3 -ը. Պլանավորման արձագանքող ձևավորում
Քայլ 1. Իմացեք, թե ինչպես է ձեր լսարանը օգտագործում ձեր կայքը:
Այս օրերին համացանցը դիտող մարդկանց մեծամասնությունը դա անում են բջջային հեռախոսներից և պլանշետներից: Որպեսզի կայքն արձագանքի, դուք պետք է ապահովեք, որ այն պատշաճ կերպով ցուցադրվի ՝ անկախ նրանից, թե որտեղ է այն դիտվում: Եթե ժամանակն ու փողն էական են, կենտրոնացեք ձեր օգտվողների շրջանում առավել տարածված սարքերի տեսակների վրա (եթե այս տեղեկատվությունն առկա է) և ինչպես են նրանք օգտագործում ձեր կայքը: Օգտագործելով ձեր վերլուծական ծրագրակազմը կամ հետազոտության այլ ձև, պարզեք.
- Ինչպիսի՞ սարքեր են նրանք ամենից հաճախ օգտագործում կայքը դիտելու համար ՝ հատուկ ուշադրություն դարձնելով բջջային հեռախոսի/պլանշետի/համակարգչի ապրանքանիշերին և էկրանի/թույլատրելիության չափերին:
- Ո՞ր դիտարկիչներն են առավել տարածված ձեր օգտվողների շրջանում: Ինչ վերաբերում է համաշխարհային վիճակագրությանը, Google Chrome- ը աշխարհում ամենահայտնի վեբ դիտարկիչն է, սակայն Safari- ն երկրորդ տեղում է:
- Ինչպես են ձեր այցելուներն օգտագործում ձեր կայքը, օրինակ ՝ որքան ժամանակ են նրանք ծախսում այն դիտելու համար, որտեղ են այն դիտում և որ բովանդակությունն է առավել հայտնի: Սա կարող է օգնել ձեզ որոշելու, թե որ տեսակի բովանդակությունն է կարևոր ներառել և որը կարող է բաց թողնվել:
Քայլ 2. Նախագծեք տարբեր դասավորություններ տարբեր սարքերի համար:
Դուք կարող եք օգտագործել CSS- ի և JavaScript- ի համադրություն ՝ օգտագործողի սարքը, ինչպես նաև նրա հնարավորությունները (անկախ նրանից ՝ աջակցում է Java- ն, Flash- ը և այլն), և համապատասխանաբար ցուցադրել ձեր կայքի տարբերակը: CSS Media Հարցումները հատկապես օգտակար են սարքի չափը/լուծաչափը որոշելու համար:
Քայլ 3. Հաշվի առեք տարբեր տեսակի փոխազդեցություններ:
Ձեր այցելուը կարող է շփվել ձեր վեբ կայքի հետ ՝ օգտագործելով մկնիկ, ստեղնաշար, հպումային էկրան կամ նույնիսկ էկրանի ընթերցող ՝ տեսողության խնդիրներ ունեցող մարդկանց համար: Հաշվի առնելով դա ՝ ձեր կայքը պետք է արձագանքի մկնիկի կտտացումներին, ստեղնաշարի ստեղներին (ներդիր, մուտքագրում, վերադարձ և այլն) և էկրանի մատների հպումներին:
Hover-over էֆեկտները ոչ մի բանի հետ չեն աշխատում, բացի մուկից: Այս էֆեկտներն օգտագործելու փոխարեն, դուք կարող եք օգտվել այցելուից պահանջել կտտացնել կոճակին կամ պատկերակին `ցուցադրելու այն, ինչ նախկինում ցուցադրված էր մկնիկի սավառնի վրա:
Քայլ 4. Մտածեք բովանդակության կառավարման համակարգի (CMS) օգտագործման մասին:
Ձեր կայքի դիզայնի արձագանքման ապահովման հեշտ միջոցը նախապես կառուցված արձագանքող թեմայով CMS- ի օգտագործումն է: Օգտագործելով CMS- ը, ինչպիսին է Joomla- ն, Drupal- ը կամ Wordpress- ը, թույլ է տալիս ապահովել, որ ձեր կայքը հիանալի տեսք ունի բոլոր սարքերում ՝ առանց պատասխանող տարրերն ինքներդ կոդավորելու: Ստուգեք ձեր վեբ հոստինգի մատակարարի հետ `տեսնելու, թե որ CMS գործիքներն են մատչելի ձեր ծառայության հետ:
Քայլ 5. Օգտագործեք առցանց գործիքներ `ձեր կայքը փորձարկելու համար:
Այժմ, երբ արձագանքող վեբ դիզայնը մեծացել է ժողովրդականությամբ, կան մի շարք անվճար գործիքներ, որոնք կարող եք օգտագործել ձեր կայքը փորձարկելու համար: Եթե դուք արդեն կոդավորել եք ձեր կայքը, օգտագործեք այս գործիքները ՝ փորձարկելու համար, թե ինչ տեսք ունի այն տարբեր պայմաններում, այնպես որ դուք կիմանաք, թե որտեղ է անհրաժեշտ արձագանքման որակը բարելավելու համար.
- Բջջային-բարեկամական թեստ Google- ի միջոցով. Ձեզ թույլ է տալիս իմանալ, արդյոք ձեր կայքը աշխատում է նույնքան շարժական սարքերի վրա, որքան համակարգչի էկրաններին:
- resizeMyBrowser: Թույլ է տալիս դիտել ձեր կայքը տարբեր լուծումներով:
- Պատասխանատու. Siteուցադրում է ձեր կայքը տարբեր սարքերի էկրաններին `տարբեր դասավորություններով (կողային կամ աջ-վերև):
Մեթոդ 2 -ից 3 -ը. Էջի դասավորությունը պատասխանատու դարձնելը
Քայլ 1. Հաշվի առեք ոճերի ազատ ձևի շրջանակը:
Շրջանակը HTML- ի, CSS- ի և (կամ) JavaScript- ի նախապես գրված հավաքածու է, որը կարող եք օգտագործել որպես ձեր կայքի կմախք: Շրջանակները բոլորն էլ փորձարկված և օպտիմիզացված են բոլոր դիտարկիչների հետ աշխատելու համար, այնպես որ այն, ինչ ձեզ հարկավոր է անել, տեղադրել ձեր բովանդակությունը, ավելացնել ձեր մեդիայի և գույնի նախասիրությունները և հրապարակել ձեր կայքը: Որոշ հանրաճանաչ շրջանակներ են.
- Bootstrap
- Կմախք
- Հիմնադրամ
Քայլ 2. Տեղադրեք տեսադաշտը մետա պիտակով:
Եթե դուք չեք օգտագործում շրջանակ, դուք կցանկանաք սկսել պատասխանող կայքի կոդավորման ամենակարևոր ասպեկտից `Viewport- ից: Տեսադաշտը վեբ կայքի այն մասն է, որը տեսանելի է օգտագործողին: Անկախ էկրանի չափից ՝ ձեր կայքի պատշաճ ցուցադրման բանալին META պիտակում դիտման չափի մասշտաբավորումն է: Դա անելու համար ներառեք այս պիտակը կայքի յուրաքանչյուր էջի վերևում.
Քայլ 3. Նշեք տեքստի չափը տեսադաշտի հետ կապված:
Երբ ձեր տեսադաշտը կարգավորվի, ձեր էջի տեքստը կփոխվի էկրանին համապատասխանելու համար: Այնուամենայնիվ, տառատեսակները կարող են չափազանց մեծ կամ չափազանց փոքր լինել, եթե դրանց չափերը նշված չեն տեսադաշտի հետ կապված: Դուք կարող եք դա անել ՝ սահմանելով տառատեսակի չափը որպես դիտման վահանակի հատուկ տոկոս ՝ vw միավորով: Այս օրինակը H1- ի վերնագրերին ասում է, որ ցուցադրվեն տեսադաշտի լայնության 10% -ով ՝ անկախ դրա չափից.
wikiHow
Քայլ 4. Օգտագործեք մեդիա հարցումներ ՝ տարբեր ոճեր ցուցադրելու համար տարբեր էկրանի չափսերի համար:
Մեդիա հարցումները թույլ են տալիս ընտրել `ցուցադրել CSS- ի որոշակի տարրեր` կախված էկրանի չափից: Դուք կարող եք ձեր մեդիա հարցման առանձնահատկությունները նշել ձեր CSS ֆայլում: Այս օրինակում մարմնի ֆոնի գույնը կդառնա կարմիր, եթե օգտագործողի էկրանի չափը 480 պիքս կամ ավելի մեծ է.
wikiHow
@media էկրան և (min-width: 480px) {body {background-color: aqua; }}
Մեթոդ 3 -ից 3 -ը. Պատկերների արձագանքման պատրաստում
Քայլ 1. Օգտագործեք CSS լայնության հատկությունը `պատկերները մասշտաբավորելու համար:
Պատկերի լայնությունը պիքսելների որոշակի քանակի սահմանելու փոխարեն (օրինակ ՝ 500 պիքսել), օգտագործեք տոկոսը (օրինակ ՝ 100%), որպեսզի պատկերը նայի իր ծնողի լայնությանը և համապատասխանաբար կարգավորվի: Պատկերի լայնությունը 100% սահմանելը ստիպում է պատկերի մասշտաբավորմանը `կախված դիտողի էկրանի չափից: Դա առցանց կատարելու համար.
Քայլ 2. Օգտագործեք առավելագույն լայնության հատկությունը `սահմանափակելու պատկերի իրական չափը:
Եթե դուք օգտագործում եք լայնության հատկությունը նախորդ քայլում ՝ պատկերը 100% -ով մեծացնելու համար, պատկերը կաճի կամ կփոքրանա ՝ տեղավորելով իր տարայի 100% -ը ՝ անկախ չափից: Սա նշանակում է, որ եթե պատկերը գտնվում է ավելի փոքր կողմում, այն կաճի ավելի մեծ, քան իր սկզբնական չափը և ավելի ցածր որակի տեսք կունենա: Որպեսզի դա տեղի չունենա, օգտագործեք max-width ՝ պատկերի չափման առավելագույն չափը 100% (դրա իրական չափը) սահմանելու համար: Ահա թե ինչպես.
Քայլ 3. Օգտագործեք HTML նկարի տարրը ՝ տարբեր պատկերներ ցուցադրելու էկրանի տարբեր չափերի վրա:
Եթե ցանկանում եք ստեղծել անհատական չափի պատկերներ ՝ տարբեր չափերի էկրաններին ցուցադրելու համար, կարող եք նշել, թե որ լուսանկարները կցուցադրվեն ձեր HTML կոդի մեջ: Ստեղծեք տարբեր չափերի պատկերներ, այնուհետև օգտագործեք այս ծածկագիրը որպես օրինակ `նշելու համար, թե որ պատկերն օգտագործել 600px և 1500px լայնությամբ էկրաններին.
