Սմարթֆոնները դառնում են կյանքի անբաժանելի մասը, ուստի կիսվել բջջային տրաֆիկանշեղորեն աճում է: HTML5-ի և CSS3-ի դասավորությունը թույլ է տալիս հարմարեցնել աշխատասեղանի բրաուզերի էջերը շարժական լրատվամիջոցների միջերեսին: Ստեղծվել է ադապտիվ դասավորության վիդեո դասընթաց, որպեսզի կարողանաս տիրապետել մասնագիտական ​​միջավայրին և ավելի հարմարավետ դարձնել քո կայքը։

«Adaptive HTML5 and CSS3» դասընթացի հեղինակ Օլեգ Կասյանովը փորձառու վեբ ծրագրավորող է, JoomlaTown.net ինտերնետային ռեսուրսի հիմնադիր, բլոգեր և սկսնակների և փորձառու մասնագետների համար ձեռնարկներ ստեղծող։

Responsive վեբ կայքի ձևավորում - ուսուցում

Յուրաքանչյուր տեսադաս ուղեկցվում է հեղինակի բացատրական մեկնաբանությունով: Դուք կծանոթանաք HTML5 և CSS3 տեխնոլոգիաների օգտագործման առանձնահատկություններին, կբարելավեք ձեր զարգացման հմտությունները և կսովորեք, թե ինչպես ստեղծել հարմարեցված դասավորություն:

Օլեգ Կասյանովի տեսադասընթացը բաղկացած է տեսական հիմնավորումներից, պրակտիկայից և լրացուցիչ նյութերից։ Դուք կստանաք հետևյալ հարցերի պատասխանները.

• որն է ֆունկցիոնալությունը HTML5 և CSS3 դասավորության մեջ;
• ինչ է իմաստային նշումը;
• ինչպես աշխատել տարբեր տեսակներմեդիա օբյեկտներ;
• որո՞նք են վայրէջքի էջերի ստեղծման փուլերը.
• ինչու է կարևոր միախառնել էջի ձևերի և վիզուալիզացիայի տեսակները.
• ստեղծման հիմնական դժվարությունները բջջային տարբերակկայք։

«Responsive layout on HTML5 and CSS3» դասընթացը ուղեկցվում է աշխատանքի կաղապարներով, սկրիպտներով և կոդով խաբեական թերթերով: Օլեգը մեծապես հեշտացնում է ուսուցման գործընթացը, ինչի շնորհիվ իսկապես հնարավոր է մի քանի անգամ ավելի արագ տիրապետել HTML5-ի և CSS3-ի հետ աշխատելուն։

Պատասխանատու HTML5 և CSS3

Դասընթացի արդյունքները ձեզ սպասեցնել չեն տա. դուք կսովորեք վերլուծել ներկա իրավիճակը, տեսնել ապագա վեբ ռեսուրսի նախագիծը, ինչպես նաև կատարել օգտակար փոփոխություններ: Օլեգ Կասյանովի դասընթացը կօգնի ձեզ տիրապետել HTML5-ում և CSS3-ում արձագանքող դասավորությանը:

Դուք չեք կարող հեռու գնալ առանց HTML5-ի և CSS3-ի

Ժամանակակից կայքերն ու վեբ մշակումն այլևս անհնար է պատկերացնել առանց HTML5-ի և CSS3-ի, ինչ էլ որ ասի:
Ցանկացած նախագիծ, ցանկացած հաճախորդ պահանջում է վավեր, խաչաձև զննարկիչ և ժամանակակից HTML5 և CSS3 դասավորություն, որը պետք է հարմարեցվի շարժական սարքերի համար:
Եթե ​​գիտեք, թե ինչպես մուտքագրել HTML5 և CSS3 և նախագիծը հարմարեցնել շարժական սարքերին, ապա կարող եք ապահով կերպով բարձրացնել ձեր աշխատանքի մեկ ժամի արժեքը:
Դե, եթե դուք ստեղծում եք կայք ձեզ համար, ապա այս գիտելիքը կօգնի այն ավելի լավը, ֆունկցիոնալ և ավելի հարմար դարձնել: Որպես կանոն, դա հանգեցնում է պաշտոնների ավելացման, հաճախելիության և, համապատասխանաբար, եկամուտների ավելացման:

Դու գիտես դա...

Հենց հիմա ներս Որոնման արդյունքները(TOP 10-ում) Yandex-ի 55%-ը կայքերն են արձագանքող դիզայնորը կարող է հարմարվել շարժական սարքերին: Սա հուշում է, որ Yandex-ը (և Google-ը նույնպես) ավելի շատ նախապատվություն է տալիս հարմարվողական դիզայնով կայքերին։ Նրանք. նրանք, որոնց վրա օգտագործողը հարմար է:
Իսկ կայքի համար ավելացվում են HTML5 և CSS3 լրացուցիչ հնարավորություններ, որով մենք կարող ենք էլ ավելի հարմար դարձնել կայքը։
Ինչպես օգտվողների, այնպես էլ ռոբոտների համար:
Վայրէջքի էջ ( Վայրէջքի էջ, վայրէջքի էջ) օգտագործվում է այցելուներին բաժանորդների կամ հաճախորդների վերածելու համար:
Նաև երբեմն օգտագործվում է երթևեկության հատվածավորման համար:
Վայրէջքի էջը կարող է լինել կամ մեկ առանձին էջ տիրույթում, կամ որպես ամբողջական կայքի մաս:
Այս դեպքում կայքը խթանվում է որոնման մեջ, իսկ վայրէջքի էջն օգտագործվում է Yandex.Direct-ում, Google Adwods-ում, Target Vkontakte-ում և այլն գովազդելու համար:
Այս համադրությունը թույլ է տալիս առավելագույնս օգտվել ինտերնետ մարքեթինգի տարբեր գործիքներից:
Այժմ հնարավորություն կա արագ սովորել և կիրառել այս ամենը ձեր աշխատանքում։

HTML5 + CSS3 + Պատասխանատվություն + վայրէջքի էջ
Այս դասընթացի միջոցով դուք կկարողանաք.

ստեղծել ռեսպոնսիվ կայքեր և էջեր
հարմարեցնել դրանք շարժական սարքերին
օգտագործեք HTML-ի և CSS-ի հզորությունը ձեր կամ հաճախորդի նախագծերում
ստեղծել ցանկացած վայրէջք էջ՝ գրավել էջեր, բաժանորդագրության էջեր, արտադրանքի վայրէջք էջեր և այլն:
ավելացնել տարբեր էֆեկտներ և սցենարներ վայրէջքի էջում
ստեղծել և օգտագործել առաջադեմ ձևեր հետադարձ կապև շատ ավելին:
Այս վիդեո դասընթացով ամենևին էլ դժվար չի լինի։

Դասընթացի ամփոփում

Ներածություն

HTML5-ի և CSS 3-ի նոր հնարավորություններ, որոնք պարզեցնում և հեշտացնում են դասավորության գործընթացը:
Իմաստային նշում. դրա գաղտնիքները և ինչի համար է այն:
Մեդիա օբյեկտների տեղադրում. ինչպես տեղադրել աուդիո և վիդեո առանց նվագարկչի:

Գործնական մաս

Քայլ առ քայլ վայրէջքի էջի ստեղծում.
Սկսած դասավորության պլանավորումից, տարբեր բարդության յուրաքանչյուր բլոկի դասավորությունից մինչև ձևաթղթերի և php մշակողների միացում:
Կարուսել/սահիկ, հարթ ոլորում, կոճակներ, CSS sprites, ձևի վավերացում և այլն:

Ավելացնել. նյութեր

Լրացուցիչ նյութերը պարունակում են բոլոր սցենարներն ու աղբյուրները, որոնց հետ մենք կաշխատենք + խաբեության թերթիկներ կոդով, որոնք պարզապես անհրաժեշտ է պատճենել և տեղադրել ճիշտ տեղում:
Ինչպես նաև այլ օգտակար ռեսուրսներ:
Տեսադասերի քանակը՝ 23

Ի՞նչ կկարողանաք անել այս դասընթացն ավարտելուց հետո:

Պատրաստման մեջ

Հասկանալով PSD դասավորությունը Photoshop-ով
Կտրեք ցանկալի պատկերները PSD դասավորությունից
Գտեք գեղեցիկ նմուշներվայրէջքի էջ և կայքեր
Դիզայնի բլոկների և դասավորության քայլերը
Միավորել պատկերակները CSS Sprites-ի մեջ
Աշխատում է PhpDesigner-ի հետ

Դասավորության առումով

միացնել գեղեցիկ տառատեսակներ google պահեստից
Արդյունավետ օգտագործեք կեղծ դասերը
Հարմարեցրեք կայքը բոլոր շարժական սարքերի համար
Օգտագործեք 2 կամ ավելի բլոկային ֆոն, անիմացիա, փոխակերպում, RGBA և այլն:
Աշխատեք @media հարցումների հետ
Տեղադրեք ինտերակտիվ Yandex քարտեզները
Ստեղծեք CSS sprites և արագացրեք էջի բեռնումը
Օգտագործեք նախապես մշակված ոճեր (նման է Bootstrap-ի նման շրջանակներին)

Բարելավման առումով

Ստեղծեք սավառնող էֆեկտներ («անիմացիան» սավառնելիս)
Կատարեք սահուն ոլորում դեպի բլոկներ և «Վերև» կոճակի համար
Վավերացրեք կոնտակտային ձևերը jQuery-ով
Ստեղծեք խելացի հետադարձ կապի ձևեր՝ անցնող UTM թեգերով
Միացրեք և կազմաձևեք նպատակները Ya.Metrika-ում՝ օգտագործելով իրադարձությունները
Թեթևացրեք էջերը՝ դրանք ավելի արագ բեռնելով
Ստուգեք և շտկեք էջերի թերությունները

Վենեսուելայի առաջնորդ Նիկոլաս Մադուրոն RT-ի եթերում Ռաֆայել Կորեայի եթերում ասել է, որ ԱՄՆ նախագահ Դոնալդ Թրամփը մոլուցք ունի լատինաամերիկյան ժողովուրդների նկատմամբ։ «Ես բաց եմ խոսում...

Թրամփը Իրանի հետ պատերազմն անվանել է «վերջին միջոց».
Իրանի հետ պատերազմի մասին խոսք չկա Սաուդյան Արաբիայի նավթային օբյեկտների վրա հարձակման լույսի ներքո, կան բազմաթիվ տարբերակներ, չորեքշաբթի ասել է ԱՄՆ նախագահ Դոնալդ Թրամփը։ «Տարբերակները շատ են, ծայրահեղ տարբերակ կա...

Զելենսկին հեռախոսազրույց է ունեցել Փենսի հետ
Ուկրաինայի նախագահ Վլադիմիր Զելենսկին հեռախոսազրույց է ունեցել ԱՄՆ փոխնախագահ Մայք Փենսի հետ։ Այս մասին հայտնում է «Strana.ua»-ն։ Ուկրաինայի ղեկավարը շնորհակալություն է հայտնել Փենսին՝ կապված երկարաձգման հետ...

Պենտագոնը Ռուսաստանը անվանել է ԱՄՆ անվտանգության ամենամեծ մարտահրավերը
Պենտագոնի ղեկավար Մարկ Էսպերը հայտարարել է, որ Ռուսաստանը մոտ ապագայում ԱՄՆ-ի անվտանգության ամենամեծ մարտահրավերն է։ «Ռուսաստանը մնում է մեր անվտանգության ամենամեծ մարտահրավերը…

Հարձակումը Եմենից չէ. Սաուդյան Արաբիան Իրանին մեղադրում է նավթավերամշակման գործարանի հարձակման մեջ
Սաուդյան Արաբիայի իշխանությունները հրապարակայնորեն ներկայացրել են անօդաչու թռչող սարքերի և այլ ինքնաթիռների բեկորները, որոնք բաց են թողնվել պետական ​​նավթավերամշակման գործարաններում սեպտեմբերի 14-ի գիշերը։ Թագավորության պաշտպանության նախարարությունը...

Թրամփը պատասխանել է Fed-ի տոկոսադրույքի իջեցմանը
ԱՄՆ նախագահ Դոնալդ Թրամփը կրկին դժգոհ է մնացել ԱՄՆ Դաշնային պահուստային համակարգի աշխատանքից այն բանից հետո, երբ հայտնի դարձավ, որ բազային տոկոսադրույքը իջեցնում է։ Նա այդ մասին թվիթերում գրել է. Նա նշել է, որ մենեջերի ղեկավարը ...

Ուկրաինան կրկին պայմաններ է առաջադրել «Շտայնմայերի բանաձեւի» իրականացման համար.
Չորեքշաբթի օրը Մինսկում կայացած կոնտակտային խմբի հերթական հանդիպմանը Ուկրաինայի պատվիրակությունը կրկին խիստ պայմաններ է սահմանել Կիևի կողմից մինսկյան համաձայնագրերի քաղաքական կետերի կատարման համար։ Սա հաստատվել է...

Ջոնսոնը և Թրամփը քննարկել են Սաուդյան Արաբիայի նավթավերամշակման գործարանների վրա հարձակման անհրաժեշտ պատասխանը
ԼՈՆԴՈՆ, 18 սեպտեմբերի – ՌԻԱ Նովոստի, Մարիա Տաբակ. Մեծ Բրիտանիայի վարչապետ Բորիս Ջոնսոնը և ԱՄՆ նախագահ Դոնալդ Թրամփը կոչ են արել միասնական դիվանագիտական ​​պատասխան տալ միջազգային գործընկերներին...

Կլիչկոն ժամանել է կամրջի մոտ, որն արգելափակվել է պայթյունի սպառնալիքի պատճառով
Կիևի քաղաքապետ Վիտալի Կլիչկոն հայտարարել է, որ Կիևի մետրոյի կամուրջը պայթեցնելու սպառնալիքով անձը հարբած է եղել կամ թմրանյութերի ազդեցության տակ է եղել։ Նախկինում Կիևի ոստիկանության պետը ...

Բելգիացիներին քննադատող Յունկերին մեղադրել են հարբածության մեջ
Բելգիայի երկու քաղաքների ղեկավարները Եվրահանձնաժողովի նախագահ Ժան-Կլոդ Յունկերից պահանջել են պաշտոնապես ներողություն խնդրել՝ ասելու համար, որ ֆրանսախոսները բելգիական քաղաքներում անհանդուրժող են…

Նեթանյահուն դիմակայում է իսրայելցիներին
Իսրայելի վարչապետ Բենիամին Նեթանյահուն մեկնաբանել է ընտրությունների նախնական արդյունքները, որոնցում երկրորդ տեղն է զբաղեցնում ազգայնական «Լիկուդ» կուսակցությունը։ Կա համապատասխան գրառում...

«Շտայնմայերի բանաձեւ». Կիևը զիջումների գնաց Դոնբասի հարցում
Ուկրաինայի արտգործնախարար Վադիմ Պրիստայկոն համաձայնել է օգտագործել Շտայնմայերի բանաձեւը Դոնբասում հակամարտությունը լուծելու համար։ Այս նախաձեռնությունը մարզին տրամադրում է հատուկ...

ԱՄՆ-ը Ռուսաստանին է վերադարձրել Նիկոլայ II-ի գողացված հրամանագրերը
ԱՄՆ-ը ռուսական կողմին է փոխանցել 16 հրամանագրեր, որոնք ստորագրվել են կայսր Նիկոլայ II-ի կողմից Մոսկվայում ամերիկյան դեսպանի նստավայրում կայացած հանդիսավոր արարողության ժամանակ։ Պատմական փաստաթղթեր են գողացել...

Քնելուց առաջ ԿԲ-ն օրինական է համարել ռուսների հաշիվների արգելափակումը
Ղրիմը «վերադարձնելու» նոր ծրագիր ՌԻԱ Նովոստի Ղրիմը կվազի Ուկրաինա, եթե այն չտարածի փտում և հնարավորությունների պատուհան չստեղծի. Այս մասին, ըստ «Դաշնային գործակալության ...

Լրատվամիջոցներ. Նեթանյահուն չեղարկել է այցը ՄԱԿ-ի Գլխավոր ասամբլեա՝ երկրում ստեղծված քաղաքական իրավիճակի պատճառով
Իսրայելի վարչապետ Բենիամին Նեթանյահուն հաջորդ շաբաթ չի մեկնի Նյու Յորք՝ մասնակցելու ՄԱԿ-ի Գլխավոր ասամբլեայի 74-րդ նստաշրջանի ընդհանուր քաղաքական բանավեճին՝ երկրում ստեղծված քաղաքական իրավիճակի պատճառով...

Ուկրաինան որոշում է կայացրել Դոնբասի հատուկ կարգավիճակի վերաբերյալ
Ուկրաինայի արտաքին գործերի նախարար Վադիմ Պրիստայկոն խոսել է Դոնբասին հատուկ կարգավիճակ տրամադրելու, այսպես կոչված, Շտայնմայերի բանաձեւի շուրջ Նորմանդյան քառյակի մասնակիցների ձեռք բերած պայմանավորվածության մասին։ Դրա մասին...

Թրամփը Բոլթոնին փոխարինող է գտել
Միացյալ Նահանգների նախագահի ազգային անվտանգության նոր խորհրդականը կլինի Ռոբերտ Օ՛Բրայենը, ով ներկայումս զբաղեցնում է նախագահի հատուկ ներկայացուցիչը պատանդների հարցերով...

Ուկրաինան պատրաստվում է դուրս բերել զորքերը Դոնբասից
Միացյալ ուժերի օպերացիայի (JFO) հրամանատար Վլադիմիր Կրավչենկոն հայտարարել է Դոնբասի սահմանազատման գծից զենքի դուրսբերման նախապատրաստման մասին։ Այս մասին նա խոսել է մշտական ​​...

Վերջնաժամկետներ և ճանապարհային քարտեզներ. Ռուսաստան-Բելառուս ինտեգրացիոն պլաններ
Ռուսաստանի և Բելառուսի ինտեգրման պլանը նախագահներ Վլադիմիր Պուտինը և Ալեքսանդր Լուկաշենկոն կարող են հաստատել մինչև դեկտեմբերի 8-ը։ «Ճանապարհային քարտեզները» մշակված են 31 ուղղություններով. Մինչև նոյեմբերի 1-ը Մոսկվայի...

Հաղթողը չի կողմնորոշվում. ո՞վ է կազմելու Իսրայելի կառավարությունը.
Իսրայելի վաղաժամկետ խորհրդարանական ընտրությունները դեռևս չեն բացահայտում մրցավազքի ակնհայտ հաղթողին, թեև, երկրի ԿԸՀ-ի նախնական տվյալների համաձայն, աջակողմյան «Լիկուդ» դաշինքն առաջ է անցել իր մրցակցից՝ ...

Գալուստի հետ շարժական սարքերՊլանշետներ և սմարթֆոններ, վեբ էջերի հարմարվողական դասավորությունը շատ տարածված է դարձել:
Սա նշանակում է, որ կայքը պետք է նորմալ դիտել ցանկացած սարքի վրա: Դե, թող մնա, եթե ոչ ճիշտ նույնը, ինչ ցուցադրվում է սեղանադիր համակարգիչ, ապա մոտ դրան: Հիմնական բանը այն է, որ դրա հետ հարմար է աշխատել՝ դիտել, որոնել ինչ-որ բան, սեղմել կոճակները և այլն:

Ցանցում ես գտա HTML5-ի և CSS3-ի վրա հիմնված պատասխանող վեբ կայքի դասավորության հետաքրքիր, անվճար մինի-դասընթաց: Ուսումնասիրել է այն։
** Դուք կարող եք ներբեռնել այս դասընթացը ինքներդ՝ լրացնելով վերին կամ ստորին թեստի հարցման ձևը: **

Նորություն HTML5-ում և CSS3-ում

Ես որոշեցի ստուգել, ​​թե հնարավո՞ր է (?) կայքը հարմարեցնել բոլոր սարքերին, ԱՌԱՆՑտեխնոլոգիայի օգտագործումը HTML5 Եվ CSS3 .

Ես փորձում եմ!

Մուտքագրված է կոդավորման մեջ «ANSI» և սպասարկման ամբողջական գրառումով. «HTML 4.01 անցումային» , կանոններով սահմանվածի փոխարեն HTML5:

Նոր թեգեր. վերնագիր, բաժին, հոդված չի օգտագործել. Պարզվեց, որ բլոկի դասավորությունը բավական է, ինչպես սովորաբար պիտակների վրա դիվ .

Նոր ձևի հատկանիշպիտակներում մուտքագրում «տեղապահ» (ակնարկ) դիտարկիչում IE8 ՉԻաշխատել է. Մնացածի մեջ - աշխատանքային.

Նմանապես. Նոր «տեսակ» հատկանիշպիտակներում մուտքագրում տեսակ = "էլ. փոստ" աշխատում է միայն ժամանակակից բրաուզերներում:

Հատկանիշ «արժեք» դեռ օգտագործվում է մուտքագրելով արժեքներ ձևերի մեջ:

Ամենակարեւոր բանը! Նախ, կայքը տպագրվում է սովորական մոնիտորի վրա, և միայն այնուհետև պիտակի մեջ գլուխ կոդերի տող տեղադրելը.

Այս գրառումը զննարկիչին ասում է ( ** ինչպես բացատրված է դասընթացում:), Այսպիսով նա ճիշտ չափվածէջի բովանդակությունը սարքի համար, որն օգտագործում եք.
Չնայած, ըստ էության, նման ռեկորդ բրաուզերը բացարձակապես ոչինչ չի ասում. Սա «կոչ» է որոնման համակարգերին։
Բայց նրանք արդեն oh-oh-շատ «նախանձախնդիր» են պիտակում նման մուտքի առկայության / բացակայության մասին գլուխ , հատկապես վերջին շրջանում։ Ստուգվում!

Այնուամենայնիվ, պետք է ասել, որ ժամանակակից բրաուզերներ շարժական սարքեր, կարծես թե դեռ սովորել են կարդալ «ուրիշների նամակները»։

**Օրինակ.Կոդի այս տողը փորձարկելիս ես այն ավելացրի չհարմարեցվածվեբկայքի էջը և... ... ... . Եվ հետո արագ հեռացվեց:

Սմարթֆոնի վրա դրա ցուցադրումը ստուգելուց հետո տեսա, որ սմարթֆոնի բրաուզերը «սարսափ» է տվել, այսինքն. ցույց է տվել էջի ԱՄԲՈՂՋ ՉԱՓԸ՝ ապահովելով հնարավորություն երկար հորիզոնական ոլորում.

Նոր հատկանիշ պիտակների համար img «srcset» «HTML 4.01» փորձարկված տարբերակում չի աշխատում!

Հիշեցնեմ և շեշտեմ, որ ես Լրատվամիջոցների հարցումներ չեն արել. Թեստեր!

CSS աղյուսակի մուտքերի օրինակներ

Նախ, որոնց մասին (՞) են ստուգվում css հատկություններըև ինչպես(՞) աշխատեցին։

գույքի ֆոն-չափը` ծածկույթ; ավելի լավ Չեն օգտագործում. Նկարները «կտրված են», այսինքն. դուրս գալ մոնիտորի էկրաններից: Դուք պետք է փոքրացնեք դրանք ամբողջությամբ տեսնելու համար:

Եվ հակառակը։

գույքի ֆոնային չափը. պարունակում է; աշխատում է հիանալի! Բոլոր բրաուզերներում! Օպտիմալ համար "կենտրոն«գծագրեր. Դա իրենցն է կշեռքները մեծ ենցանկացած չափի մոնիտորի համար:

Նմանապես.

Նույն գույքի ֆոնային չափը. պարունակում; ՀՐԱՇՏ աշխատեց "կողային«գծագրեր, այսինքն. ձախ աջ. Փորձված!

Կողային գծագրերը ցուցադրվում են պիտակների միջոցով span , տալով նրանց բոց՝ ձախ կամ աջ, բայց ԳԼԽԱՎՈՐ ԲԱՆԸ!
Գլխավորը, որը թողարկեց գծագիրը որպես ֆոնի վրա 2 չխախտող տիեզերական նիշ , տալով տեքստի չափը, բարձրությանը հավասար ֆոնային նկար (** նվազեցնելով տեքստի չափը՝ նկարը կրճատվում է համաչափ՝ առանց աղավաղումների).

Ստորև բերված ելքային դիագրամները:

  <— это HTML

Span#proba8 ( <— здесь CSS
ֆոն՝ url(images/proba8.jpg) առանց կրկնության;
բոց: ձախ;
տառաչափը՝ 240px;
ֆոնի չափը. պարունակում է;
լուսանցք՝ 020px;
լիցք-ներքև՝ 0
}

Վերը տրված սխեմայի համաձայն ցուցադրված փորձնական գծագիրն ուներ իրական չափը 210x240px. Այն լավ հարմարվեց և ամբողջությամբ ցուցադրվեց մոնիտորի վրա լուծում 120x150.

Ամեն ինչ աշխատում է: ԲԱՅՑ

Ստուգելով նման ելքային սխեմայի օգտագործումը իմ «Պոլիգոնի» վրա, ես գտա նշանակալի տեսք դատարկություններ նկարներից առաջ և հետո, սմարթֆոնով էջը դիտելիս։ Սա հատկապես նկատելի էր երբ դիտվում է ուղղահայաց. Նույնիսկ!
Նույնիսկ չնայած այն հանգամանքին, որ CSS կանոններում գրված էր. հեռացնել վերևի/ներքևի նահանջները:

Դրա համար էլ ամեն ինչ կողային գծագրերայս էջի թողարկման համար սովորական ձևով, առանց հարմարվողական «տարօրինակությունների»։

Ավելին, ամենամեծ կողային գծագրի չափը թույլ տվեց դա անել:

Ճիշտ է, այս դեպքում կողայիննկարները ցուցադրվում են չափազանց մեծ, ինչը իրականում չի համապատասխանում նրանց կենտրոնական(հարմարեցված) «կոլեգաներ», բայց... ... ... .
Այստեղ յուրաքանչյուրն ընտրում է այն, ինչը լավագույնն է: «Երկու չարիքներից» ընտրել եմ ամենապարզը։

** Եվ վերջինը.Ֆայլ «զրոյականացում»ոճերը reset.css չի միացել այս էջին: Նման պարզ կայքերի համար դա անհրաժեշտ չէ։ Այո, և... ...ես նա չեմ սիրում: Drink-and-syvaesh, ապա ամեն ինչ նորից:

Դե, լուրջ - ներբեռնման արագություն. Յուրաքանչյուր լրացուցիչ ֆայլ է սերվերի զանգ.

Հիմա մի քանի տող հարմարվողականության մասին:

Սկզբումբերեց կոդ գրելու օրինակ՝ մուտքագրման երկու դաշտերը (անունը և էլ. փոստը) ձևի պիտակներում մինչև 200px (այն դեպքում, երբ դրանք դիտվում են շարժական սարքերում) Այսպիսով, ինչպես տրված էր մինի դասընթացում . Տարօրինակ մուտք!

մեդիա էկրան և (առավելագույն լայնությունը՝ 900px) (

լայնությունը՝ 200px;))

Իրականում, լրատվամիջոցների հարցման կոդը պետք է այլ տեսք ունենա:

@media (առավելագույն լայնությունը՝ 900px) (
.subscribe input, .subscribe input(
լայնությունը՝ 200px;))

*Պրիմ.Օգտագործելով ֆիքսված լայնություն, ավելի լավ է դա հստակեցնել առավելագույն չափը.

Ֆիքսված լայնության օպտիմալ չափը 1200px± է

Սրանք «մեդիա հարցումներ»Ինձ հիշեցրեց դիզայնը եթե (պայման) (կատարել) լեզուներից՝ PHPԵվ JavaScript. Դրանցով մենք վերակառուցում ենք կայքի ոճերը՝ կախված էկրանների չափսերից։

հղում

Տառատեսակների հետ ճիշտ աշխատանքի համար խորհուրդ է տրվում դրանց չափերը նշել ոչ թե «px», այլ «em»-ով, ինչպես նաև վերցնել տառատեսակները հենց այսպես կոչված. «Անվտանգ CSS տառատեսակներ».

Photoshop-ում հատուկ գծագրություն եմ արել, որից կարելի է պարզել, թե որ տառատեսակներին են պատկանում «անվտանգ», և ամենակարևորը `ինչու (?!):

1em = 16px

Ճիշտ է, պետք է ասել, որ նման թարգմանությունը բավականին «պայմանական» է, թեև մինի դասընթացում այս մասին խոսք չկա։

Գոյություն ունեցող չափման միավորների և դրանց փոխակերպման մասին մանրամասն կարող եք ծանոթանալ կից արխիվից հիանալի հոդվածում:

Նմուշային միավորներ հարմարվողական դասավորության համար

Փորձված. Այս միավորների միջոցով սահմանված տառատեսակների որոշ չափեր: Աշխատում է Բայց ես ավելի շատ սովոր եմ պիքսելների հետ գործ ունենալ: Այստեղ նրանք նույնպես օգտագործել են այս էջի պարտադրման համար:

Հատկապես, որ պիքսելները, իմ կարծիքով, կատարյալ տեղավորումհարմարվողական դասավորության համար, քանի որ դրանք հենց «կապված» են մոնիտորների չափերը և լուծումները օգտագործված սարքեր.

Այսինքն՝ յուրաքանչյուր սարք կունենա իր պիքսելային չափսը, և եթե մի միավորից մյուսը չկտրվեք, այլ ամեն ինչ արտահայտեք նույն չափման միավորներով, արդյունքը դրական կլինի։

Այն, ինչ իրականում տեսնում եք ձեր սարքում այս էջը դիտելիս:

Համար ոչ տառատեսակային տարրեր.նկարներ, բլոկի չափսեր, խորհուրդ հաշվարկել, և օգտագործեք «%» տոկոսները, և սա հաշվարկման այլ տեխնիկա է՝ կախված չափից «ծնող բլոկ».
Կարճ ասած՝ «սարսափելի հեմոռոյ»։

Հետևաբար, մի փոքր պարապելով այս փորձնական էջում, ես «թքեցի» բոլոր տեսակի հարմարվողական դասավորությունների վրա և սկսեցի տպագրել ինձ համար սովորական, ծանոթ ձևով։ Հոգնած!

Դե լուրջ, էջի վերջում գրել եմ դրա մասին։

Նրանք, ովքեր դեռ հարմարվելու կարիք ունեն, պետք է ուշադրություն դարձնեն բրաուզերներում արդեն ներկառուցված գործիքներին:

Վեբ մշակման օգտակար գործիքներ

Զննարկիչում հարմարվողական դասավորություն մշակելու համար Firefoxկան գերազանց(!) գործիքներ։

Այս ներդիրը բացվում է, երբ սեղմում եք F12 ստեղնը

Կոճակ «հարմարվողական դիզայն»թույլ է տալիս տեսնել, թե ինչպես է էջը տեսք ունենալու մոնիտորների տարբեր չափերի և տարբեր կողմնորոշումներով (ուղղահայաց/հորիզոնական):

Այս գործիքի կոճակի օգտագործման մանրամասները ներկայացված են նշված մինի դասընթացում:

Ճիշտ է, ուզում եմ ասել, որ ես ինքս նախընտրում եմ ստուգելվրա պատրաստված իրական սարքեր , որը վերացնում է բրաուզերների «տարօրինակությունները»։
Կոճակը, իհարկե, անշուշտ շատ օգտակար է, և այն շատ է օգնում, բայց... ... ...

Նրանց համար, ովքեր չունեն իրենց վեբ էջերը ստուգելու նման հնարավորություն, կարող եմ խորհուրդ տալ հարմարվողականությունը ստուգելու հետաքրքիր ռեսուրս. «Արտառոց գործիքներ» (կբացվի նոր պատուհանում).

**ԲԱՅՑ! Պետք է հիշել.
Այն ցույց է տալիս միայն էջեր արդեն վերբեռնված է ինտերնետ.
Բացի այդ, նրա սերվերը շատ հաճախ «ընկնում է» (այսինքն անհասանելի է):

Ընդհանուր առմամբ, վստահ նշան ճիշտ հարմարվողական դասավորություն - առանց ներքևի ոլորման.

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

Եզրակացություն, եզրակացություններ

Ինչպես արդեն գրել էի, այստեղ մի փոքր մարզվելով, այս էջում ես «թքեցի» հարմարվողականության վրա և սկսեցի շարադրել սովորական ձևով։ Եվ սա պատահական չէ!

Նախ.դասավորության բարդությունը բազմիցս մեծանում է, և դրա հետ մեկտեղ CSS կոդի չափը:
Ինչն է վատ, մանրամասն այստեղ. «Վեբ կայքի մշակում»(նոր պատուհանում):

Երկրորդ.և առանց «հարմարվողական իմաստության» դուք կարող եք ստեղծել այնպիսի կայքեր, որոնք սովորաբար ցուցադրվում են շարժական սարքերում, որոնց համար դրանք պետք է ավելի շատ տրամադրվեն ամրագրվածլայնությունը։
Օրինակ: «Անձնական էջ» (կբացվի նոր պատուհանում).

Երրորդ.հետևում է նախորդից, քանի որ բովանդակությունը ամրագրվածէջերը չեն «սփռվի» մոնիտորի վրա, եթե կայք այցելեք մեծ էկրանով համակարգչով:

Չորրորդ:Ես հաճախ եմ տեսնում կայքեր համարվում է հարմարվողական, բայց իրենց համար բովանդակությունը կտրված էայսպես հաշվի համարնրանց տեսակը կրճատել 2-3 անգամ!

Հինգերորդ.բխում է չորրորդ կետից. Այսպիսով, ո՞րն է տարբերությունը (?!) այդ իմը ոչ արձագանքող էջերվրա սմարթֆոնները պետք է բաժանվենմատները ցանկալի չափի: Այո, և դա! Պարզապես դիտելու հարմարության համար: Բովանդակությունը անփոփոխ է:

Ի դեպ, սմարթֆոնները կարևոր չեն իմ կայքի համար։ Այնքանով, որքանով, ավելի քան 97%այցելուները դրան են գալիս սովորական համակարգիչներից և պլանշետներից, և 3%-ից պակաս սմարթֆոններից.

Այս «սգո ցանկը» կարելի է շարունակել, բայց կարծում եմ՝ բավական է։ Բավական է պատմել այն պատճառների մասին, թե ինչու ես հոգնել էի հարմարվողական դասավորությունից, որը ուսումնասիրվածբայց դիմել ՉԻպատրաստվում է.

Ինչի համար?!

Ինչու՞ դժվարացնել այն, ինչը կարող է ավելի հեշտ լինել: Առանց «շամանական հարմարվողական պարերի»։

Արդյունք - կարիք չկա!

Սա իմ եզրակացությունն է ինձ համարվերը նշված բոլորից. Ի վերջո, բացարձակապես ցանկացած սարքի վրա՝ լինի դա սովորական համակարգիչ, պլանշետ կամ սմարթֆոն, կայքը կարելի է դիտել!

Եթե ​​ինչ-որ բան դժվար է տեսնել, կարող եք այն հրել ձեր մատներով: Ոչ մի սարսափելի բան! Ժամանակակից էլեկտրոնային սարքերը խելացի են: Նրանք թույլ են տալիս մեծացնել մոնիտորի էկրանի տեսանելիությունը:

Բացի այդ, փորձեք «շարունակել» կոդի մեջ (այն անընդհատ ավելացնելով) առկա սարքերի բոլոր հնարավոր չափերի համար. ՈՒՏՈՊԻԱ

Օրինակ՝ օրերս եղբորս տղան ցույց տվեց իր նոր ձեռքբերումը։ Ժամացույց-սմարթֆոնմի փոքր ավելի մեծ, քան լուցկու տուփը:
Եւ ինչ?!
Շտապել հիմա «գլխով» գրել կոդը լուցկու տուփի չափերի տակ։ Եվ հետո կլինի (կամ գուցե արդեն հայտնվել է) բրոշի չափի համակարգիչ։ Եւ ինչ?!
Նորից փոխե՞լ կոդը: Այո, լավ, թզերի մեջ, արեք նման «դժբախտության կայքեր»: Ավելի պարզ......

Իրականում, իմ ամբողջ ռեսուրսը նախատեսված է նրանց համար, ովքեր ցանկանում են սովորել պարզ կայքեր պատրաստել և հաճույքով պատրաստել դրանք, այլ ոչ թե իրենք փնտրել «գլխացավ». Նման մի բան... ... ...

Այնուամենայնիվ, սա իմ անձնական կարծիքն է։ Ով դեռ ուզում է սա անի, թող ավելի հեռուն նայի։

Կարևոր հավելում

Նրանց համար, ովքեր ցանկանում են ավելի լավ հասկանալ դասավորության տարբեր տեսակներ, ես բարձր խորհուրդ եմ տալիս սկզբում(մինչև մինի-դասընթացն ուսումնասիրելը) ներբեռնեք և կարդացեք երկու լավ, հետաքրքիր հոդվածներ. «Հարմարվողական դասավորություն կամ բջջային տարբերակ»Եվ «Հարմարվողական դիզայն».

Եվ բացի դրանից!

Պարտադիր Ստորև կարդացեք հոդվածը կից արխիվից։

Ինչու է դա անհրաժեշտ:

Ես այն հավաքեցի Runet-ում հայտնի դիզայների վեբ դիզայնի մասին գրքից նյութերի միջոցով և գրքի հեղինակի խոսքերի մասին. բջջայինկայքի տարբերակները կտրուկ տարբերվում ենայն, ինչ կարող էիր կարդալ նախորդ արխիվում:

Բայց ամենակարեւոր բանը(!)- այլ պատճառով:

Եվ լրացնելով այս ձևաթուղթը, կարող եք ստանալ ադապտիվ դասավորության վերաբերյալ հետաքրքիր ուսուցողական վիդեո դասընթաց։

Մենք թողարկել ենք նոր գիրք՝ «Սոցիալական մեդիայի բովանդակության շուկայավարում. Ինչպես մտնել բաժանորդների գլխին և ստիպել նրանց սիրահարվել ձեր ապրանքանիշին»:

Մասնավորապես, այս տեխնոլոգիան ակտիվորեն օգտագործվում է, որպեսզի կայքը նույն տեսք ունենա տարբեր տեսակի սարքերի վրա՝ համակարգիչներ/նոութբուքեր և սմարթֆոններ/պլանշետներ՝ տարբեր էկրանի չափսերով:

Այսօր ստեղծվել է պատասխանատու կայք՝ օգտագործելով HTML5 նշագրման լեզուն և CCS3 կասկադային ոճերի թերթիկները: Բայց մինչ այն պահը, երբ համապատասխան տեխնոլոգիաները դարձան ստանդարտ բոլոր հայտնի բրաուզերների համար, JavaScript ծրագրավորման լեզուն օգտագործվում էր համապատասխան նպատակների համար։ Նույնիսկ ավելի վաղ (մինչև 2010 թվականը) նրանք պետք է ստեղծեին նույն էջերի մի քանի տարբերակներ, բայց տարբեր նշագրումներով, որպեսզի իրենց մշակած կայքը ճիշտ ցուցադրվեր տարբեր էկրանների վրա։

Ինչու՞ է ձեզ անհրաժեշտ էջի արձագանքող դասավորություն:

Մինչև համեմատաբար վերջերս, բրաուզերի ներքևի մասում գտնվող բազմաթիվ կայքեր այցելելիս, դուք կարող եք տեսնել մի սահող, որը էջը ոլորում է հորիզոնական: Դա տեղի է ունեցել, օրինակ, եթե ինտերնետ բրաուզերի պատուհանը չի ընդլայնվել ամբողջ էկրանով, այլ զբաղեցրել է դրա համեմատաբար փոքր տարածքը: Գրեթե միշտ կարելի էր տեսնել, երբ էկրանի լուծաչափը, որի վրա պատկերված էր պատկերը, 800 x 600 էր կամ, առավել եւս, 640 x 480 պիքսել:

Այսօր նույնիսկ բջջային սարքերի սեփականատերերը հազվադեպ են հանդիպում նման բանի։ Եվ դրա պատճառը ոչ միայն նրանում է, որ ժամանակակից էկրանների լուծաչափը HD կամ ավելի բարձր է, այլ նաև այն, որ արձագանքող էջի դասավորությունն այժմ դարձել է գրեթե ստանդարտ:

Ինչու և երբ հայտնվեց արձագանքող դիզայնը:

21-րդ դարի երկրորդ տասնամյակի սկզբին խիստ անհրաժեշտություն կար ստեղծել այնպիսի տեխնոլոգիաներ, որոնք թույլ են տալիս ստեղծել ունիվերսալ վեբ էջեր։ Հարմարվողական դիզայնի ստեղծումն ու զարգացումը հրահրող հիմնական նախադրյալներն էին.

• նոր օգտվողների զանգվածային ներհոսք դեպի ինտերնետ;
• էկրանի տարբեր լուծումներով բազմաթիվ սարքերի առաջացում;
• ճնշումը որոնողական համակարգերից, որոնք սկսեցին պատժամիջոցներ կիրառել այն կայքերի նկատմամբ, որոնք ունեին նույն բովանդակությամբ էջերի մի քանի տարբերակներ։

Առաջին ստեղծողը պաշտոնապես վեբ դիզայներ Իթան Մարքոթն է: 2010 թվականի կեսերին նա հրապարակեց նյութ, որտեղ խոսեց մի տեխնոլոգիայի մասին, որը պետք է լուծի տարբեր աշխատանքային տարածքի լուծումներ ունեցող բրաուզերներում վեբ էջերի նորմալ ցուցադրման խնդիրը։

Որոշ ժամանակ անց մեկ այլ հայտնի փոդքասթեր առաջարկեց հավելումներ այն հասկացություններին, որոնց մասին խոսում էր իր գործընկերը։

Ինչի օգնությամբ և ինչպես է ստեղծվում հարմարվողական դասավորությունը:

Նախքան այն հարցի քննարկումը, որը վերաբերում է հարմարվողական դասավորություն կազմելուն, անհրաժեշտ է համառոտ դիտարկել օգտագործվող հիմնական տեխնոլոգիաները: Այժմ դրանք երկուսն են՝ HTML5 և CSS3: Մինչև վերջերս օգտագործվում էին HTML4 և CSS2, բայց դրանցով ունիվերսալ դիզայն ստեղծելու համար պետք էր օգտագործել նաև JavaScript։

CSS3-ը Cascading Style Sheets-ի հաջորդ սերունդն է: Այս տեխնոլոգիան նախատեսված է օգտատիրոջ բրաուզերում էջի տարրերի ցուցադրման կանոններ ստեղծելու համար: Դրա միջոցով դուք կարող եք նշել, օրինակ, թե ինչ չափի պետք է ունենա տարրը օգտատիրոջ էկրանի որոշակի լուծաչափի դեպքում, կամ սահմանել կանոն, որ այն միշտ պետք է զբաղեցնի որոշակի տոկոս տարածություն (100%՝ լրացնելով ամբողջ աշխատանքային տարածքը: զննարկիչը):

Հենց երրորդ սերնդում հայտնվեց «մեդիա հարցումների» կանոնը, որի միջոցով դասավորության դիզայները կարող է ստեղծել առանձին դասեր յուրաքանչյուր կոնկրետ թույլտվության համար։

Շատ կարևոր կետ!

Մարդը, ով նախատեսում է օգտագործել CSS3 ռեսպոնսիվ դիզայնի համար, պետք է տեղյակ լինի, որ, ի տարբերություն CSS2-ի, Cascading Style Sheets 3-ը չի օգտագործում պիքսելներ, այլ տոկոսներ՝ օբյեկտների չափը նշելու համար:

Ինչ վերաբերում է HTML5-ին, այն ուղղակիորեն նշում է էջը, այսինքն՝ նշում է, թե որտեղ պետք է տեղադրվեն որոշակի տարրեր։ Որպեսզի օբյեկտները հարմարվեն լուծմանը, HTML պիտակի պարամետրերը սահմանում են CSS3-ի միջոցով նախկինում ստեղծված դասերը:

Պատասխանատու դասավորության պարզ օրինակ

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

Նախ, օգտագործելով HTML, մենք ինքնին տարրը կտեղադրենք էջում.

DIV պիտակը ցույց է տալիս, որ այն, ինչ պարունակում է, առանձին բլոկ է: Երբ էջում շատ նման բլոկներ կան, նշվում է «class» հատկանիշը։ Սա անհրաժեշտ է, որպեսզի զննարկիչը հասկանա, թե որ կանոնը կիրառել որոշակի բլոկի համար:

Այժմ դուք պետք է ստեղծեք կանոնը ինքնին, այսպես կոչված

CSS կոնտեյներ.

Div (լայնությունը՝ 100%, տեքստի հավասարեցումը՝ կենտրոնում; ) div img ( քաշը՝ 100%, բարձրությունը՝ ավտոմատ; )

Այս կոդը պարզապես թույլտվություններ է սահմանում հարմարվողական դասավորության համար: Մասնավորապես, նշվում է, որ լայնությունը (wight) միշտ պետք է լինի վեբ բրաուզերի հաճախորդի տարածքի լայնության 100%-ը, մինչդեռ բարձրությունը (բարձրությունը) ճշգրտվում է ավտոմատ կերպով:

Հարմարվողական դասավորության ստուգում

Կան հատուկ գործիքներ՝ հարմարվողական դասավորությունը ստուգելու համար: Օրինակ՝ GoogleChrome բրաուզերում կարող եք սեղմել «F12» ստեղնը, այնուհետև բացվող վահանակում սեղմել սմարթֆոնի և պլանշետի պատկերով պատկերակը։ Այս գործողությունից հետո կհայտնվեն ևս մի քանի վահանակներ, որոնցում դուք պետք է նշեք հետաքրքրության լուծումը:

Դա կարելի է նույնիսկ ավելի հեշտ դարձնել: Ստուգելու համար, թե արդյոք արձագանքող դիզայնը աշխատում է, դուք պետք է սեղմեք CTRL-ը և սեղմեք «+» կամ «-»: Այս գործողությունից հետո էջը պետք է համապատասխանաբար մեծանա կամ նվազի, բայց այն տարրը, որի վրա կիրառվում է հարմարվողական դասավորությունը, կպահպանի իր համամասնությունների հարաբերակցությունը (կամ կանի այլ բան, ինչ նշված է կանոններում):

Գործիքներ, որոնք պարզեցնում են արձագանքող դիզայնի դասավորությունը

Պատասխանատու դիզայնի դասավորությունը բավականին ժամանակատար խնդիր է: Հետեւաբար, այս բոլոր ընթացակարգերի իրականացման ժամանակը նվազեցնելու համար ավելի լավ է օգտագործել հատուկ գործիքներ: Հայտնի Bootstrap* շրջանակը կարելի է անվանել դրանցից մեկը։

HTML-ի և CSS-ի այս գործիքակազմը, օրինակ, ներառում է մեծ թվով նախապես սահմանված դասեր, որոնք կարող եք օգտագործել նախագծելիս: Այն պարունակում է նաև դինամիկներ, որոնք բոլոր կանոններին և ստանդարտներին համապատասխան թույլ են տալիս ստեղծել հարմարվողական տարրեր։

Այն օգտագործելու համար նախ պետք է ուղղակիորեն գիտելիքներ ձեռք բերել հենց իրենք՝ CSS3-ի և HTML5-ի մասին, այնուհետև սովորել շրջանակի առանձնահատկությունները: Այնուամենայնիվ, հասկանալով դրա հետ աշխատելու բարդությունների մեծ մասը, դուք հետագայում կարող եք բազմիցս կրճատել ռեսպոնսիվ կայքի դիզայնի մշակման ժամանակը:

*Bootstrap-ը բաց կոդով ծրագրաշար է, որը մշակվել է Twitter Inc.-ի կողմից: Այն բաժանվում է անվճար և ունի լայն համայնք, որտեղից միշտ կարող եք խորհուրդներ խնդրել։