Բովանդակություն
- Պատասխանող պատկերներ
- Ներկայացում
- Պայմանական և ծույլ բեռ
- Պատասխանատու տպագրություն
- MediaԼՄ-ների հարցումներ JavaScript- ում
- Առաջադիմական ուժեղացում
- Դասավորություն
- CSS ցանցի դասավորություն
- Վերջապես
Պատասխանատու վեբ դիզայնը աներևակայելի պարզ է թվում: Ընտրեք դասավորության ճկուն ցանցերը, օգտագործեք ճկուն կրիչներ (նկարներ, տեսանյութեր, իֆրամներ) և կիրառեք մեդիա հարցումներ ՝ այս չափումները թարմացնելու համար ՝ բովանդակությունը ցանկացած տեսապատկերում լավագույնս դասավորելու համար: Գործնականում մենք իմացանք, որ իրականում այդքան էլ հեշտ չէ: Փոքրիկ խնդիրները, որոնք ցնցում են յուրաքանչյուր ծրագրի ընթացքում, ստիպում են մեր գլուխը քերծել, և երբեմն նույնիսկ սեղանի վրա փորագրում են եղունգների խրամատներ:
Քանի որ ես սկսեցի պատասխանել Responsive Design Weekly տեղեկագիրը, ես բախտ եմ ունեցել խոսելու վեբ համայնքի շատ անդամների հետ և լսելու նրանց փորձը: Ես ուզում էի պարզել, թե համայնքն իրականում ինչ է ուզում սովորել, ուստի ես ուսումնասիրություն եմ տարածել ընթերցողների շրջանում: Ահա լավագույն արդյունքները.
- Պատասխանող պատկերներ
- Կատարողականի բարելավում
- Պատասխանատու տպագրություն
- MediaԼՄ-ների հարցումներ JavaScript- ում
- Առաջադեմ ուժեղացում
- Դասավորություն
Հաշվի առնելով այդ թեմաները, ես վարեցի մի շարք փոդքասթեր ՝ խնդրելով մեր արդյունաբերության որոշ ղեկավարների իրենց մտքերը: Նրանց պատասխաններում մի կետը միաձայն էր. Կենտրոնացեք հիմունքները ճիշտ ստանալու վրա, նախքան սկսեք անհանգստանալ հուզիչ և առաջադեմ տեխնիկայի մասին: Վերցնելով իրերը դեպի հիմունքներ ՝ մենք ի վիճակի ենք ամուր ինտերֆեյս կառուցել յուրաքանչյուրի համար ՝ շերտավորելով հատկությունները, երբ սարքը կամ օգտագործողի համատեքստը թույլ են տալիս:
«Ուրեմն ... ի՞նչ կասեք այս առաջադեմ տեխնիկայի մասին», - լսում եմ, թե ինչպես եք հարցնում: Կարծում եմ, որ Սթիվեն Հեյն ամենալավն ամփոփեց այն ժամանակ, երբ ասաց. «Վերջնական RWD տեխնիկան մեկնարկելն է ՝ չօգտագործելով ցանկացած առաջավոր RWD տեխնիկա: Սկսեք կառուցվածքային բովանդակությունից և կառուցեք ձեր վերևում: Ընդմիջման կետ ավելացրեք միայն այն ժամանակ, երբ դիզայնը խախտվում է, իսկ բովանդակությունը դա է թելադրում և ... վերջ »:
Այս հոդվածում ես կսկսեմ հիմունքներից և կավելացնեմ բարդության շերտեր, քանի որ իրավիճակը թույլ է տալիս, որպեսզի զարգացնեմ այդ առաջատար տեխնիկաները: Եկեք սկսենք.
Պատասխանող պատկերներ
Հեղուկ լրատվամիջոցները RWD- ի հիմնական մասն էին կազմում, երբ այն առաջին անգամ սահմանվեց Իթան Մարկոտի կողմից: լայնությունը `100%; , առավելագույն լայնությունը `100%; այսօր էլ աշխատում է, բայց արձագանքող պատկերի լանդշաֆտը շատ ավելի բարդ է դարձել: Էկրանի չափերի, փիքսելների խտության և աջակցության սարքերի քանակի աճով մենք ավելի մեծ վերահսկողություն ենք փափագում:
Երեք հիմնական մտահոգությունները սահմանվել են Պատասխանատու պատկերների համայնքային խմբի (RICG) կողմից.
- Պատկերի կիլոբայթ չափը, որը մենք ուղարկում ենք մետաղալարով
- Պատկերի ֆիզիկական չափը, որը մենք ուղարկում ենք բարձր DPI սարքեր
- Պատկերի նկարը գեղարվեստական ուղղության տեսքով `տեսադաշտի որոշակի չափի համար
Yoav Weiss- ը, Indiegogo- ի օգնությամբ, կատարել է Blink- ի իրականացման աշխատանքների մեծ մասը `WebKit- ի Google- ի պատառաքաղը, և մինչ դուք կարդաք այն, այն կուղարկվի Chrome- ում և Firefox- ում: Safari 8-ը կուղարկի srcset, սակայն չափերի հատկանիշը միայն գիշերային կառուցվածքներում է, իսկ նկարը> դեռ չի իրականացվել:
Մեր վեբ մշակման գործընթացում ինչ-որ նոր բան գալով ՝ դժվար կլինի սկսել: Եկեք քայլ առ քայլ մի օրինակով անցնենք:
img! - Հայտարարեք հետադարձ նկարը ոչ նկարն աջակցող զննարկիչների համար -> src = "horse-350.webp"! - Հայտարարեք պատկերի բոլոր չափերը srcset- ում: Ներառեք պատկերի լայնությունը `օգտագործելով w նկարագրիչը` զննարկիչին յուրաքանչյուր պատկերի լայնության մասին տեղեկացնելու համար: -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w" "! - Չափերը տեղեկացնում են զննարկիչին մեր կայքի դասավորության մասին: Այստեղ մենք ասում ենք, որ ցանկացած տեսադաշտի համար, որը 64 ցեմենտով և ավելի մեծ է, օգտագործեք պատկեր, որը կզբաղեցնի տեսադաշտի 70% -ը -> sizes = "(min-width: 64em) 70vw,! - Եթե տեսադաշտը դա չէ մեծ, ապա 37.5 ցամաք և ավելի տեսադաշտի համար օգտագործիր պատկեր, որը զբաղեցնում է դիտահորի 95% -ը -> (min- լայնությունը `37.5em) 95vw,! - և եթե դիտակետը դրանից փոքր է, ապա օգտագործիր պատկեր, որը զբաղեցնում է դիտապատկերի 100% -ը -> 100vw "- միշտ ունենա alt տեքստ: -> alt =" Ձի "/>
Կատարման տեսանկյունից նշանակություն չունի չափերի հատկանիշում օգտագործում եք նվազագույն լայնություն կամ առավելագույն լայնություն, բայց աղբյուրի կարգը նշանակություն ունի: Theննարկիչը միշտ կօգտագործի համապատասխանության առաջին չափը:
Նաև հիշեք, որ մենք կոդավորում ենք չափսերի հատկանիշը, որը պետք է ուղղակիորեն սահմանվի մեր դիզայնի դեմ: Սա կարող է առաջացնել խնդիրներ առաջ շարժվել: Օրինակ, եթե ձեր կայքը վերաձեւակերպեք, ապա ձեզ հարկավոր է վերանայել բոլոր img> կամ նկարները> և վերասահմանել չափերը: Եթե դուք օգտագործում եք CMS, դա կարող է հաղթահարվել որպես ձեր կառուցման գործընթացի մի մաս:
WordPress- ն արդեն ունի մի պլագին ՝ օգնելու համար: Այն սահմանում է srcset- ը WP ստանդարտ պատկերի սորտերի վրա և թույլ է տալիս չափերը հայտարարել կենտրոնական վայրում: Երբ էջը շտեմարանից գեներացվում է, այն փոխում է img> - ի ցանկացած հիշատակում և փոխարինում դրանք նկարի նշագրմամբ:
Հիմնական
- Մտածեք ՝ իսկապե՞ս անհրաժեշտ է պատկեր ներառել: Պատկերը հիմնական բովանդակությո՞ւն է, թե՞ դեկորատիվ է: Մեկ պակաս պատկեր կնշանակի բեռնման ավելի արագ ժամանակ
- Օպտիմալացրեք այն պատկերները, որոնք անհրաժեշտ է ներառել ՝ օգտագործելով ImageOptim
- Սահմանեք ժամկետանց վերնագրեր ձեր սերվերի կամ .htaccess ֆայլի ձեր պատկերների համար (տե՛ս «Կատարողականություն» բաժնում մանրամասները)
- PictureFill- ը տրամադրում է նկարների բազմաֆունկցիոնալ աջակցություն
Առաջադեմ
- Yույլ բեռնեք ձեր պատկերները ՝ օգտագործելով jQuery- ի Lazy Load հավելվածը
- Հատկությունների հայտնաբերման համար օգտագործեք HTMLImageElement.Sizes- ը և HTMLPictureElement- ը:
- Github- ում հայտնաբերված PictureFill WP առաջադեմ plugin- ը թույլ կտա ձեզ սահմանել պատկերի լայնության և չափի անհատական արժեքներ
Ներկայացում
Մեր էջերում ամենաարագ ընկալվող կատարումն ստանալու համար մեզ անհրաժեշտ է բոլոր HTML և CSS- ները, որոնք անհրաժեշտ են սերվերի առաջին պատասխանի ընթացքում մեր էջի վերին մասը մատուցելու համար: Այդ կախարդական թիվը 14 կմ է և հիմնված է գերլարված պատուհանի առավելագույն չափի վրա ՝ առաջին շրջադարձի ժամանակ (RTT):
Պատրիկ Համանը, Guardian- ի առջևի տեխնիկական առաջատարը և նրա թիմը կարողացել են կոտրել 1000 մմ պատնեշը `օգտագործելով առջևի և հետադարձի տեխնիկայի խառնուրդ: Guardian- ի մոտեցումն է ապահովել պահանջվող բովանդակությունը `հոդվածը, օգտագործողին հասցնել հնարավորինս արագ և 14 կիլոգրամանոց կախարդական համարի սահմաններում:
Եկեք նայենք գործընթացին.
- Օգտագործողը կտտացնում է Google- ին հղում դեպի նորություն
- Հոդվածի համար տվյալների շտեմարան է ուղարկվում մեկ արգելափակման հարցում: Ոչ մի հարակից պատմություն կամ մեկնաբանություն չի պահանջվում
- HTML- ը բեռնված է, որը պարունակում է Կրիտիկական CSS
- գլխում>
- Ձեռնարկվում է «Կտրել մանանեխը» գործընթացը և բեռնվում են օգտագործողի սարքի առանձնահատկությունների վրա հիմնված ցանկացած պայմանական տարրեր
- Itselfանկացած բովանդակություն, որը կապված է հենց այդ հոդվածի հետ կամ դրան աջակցում է (հարակից հոդվածի պատկերներ, հոդվածի մեկնաբանություններ և այլն), ծույլ են
Նման մատուցման կրիտիկական ուղին օպտիմալացնելը նշանակում է, որ գլուխը> 222 տող է: Այնուամենայնիվ, կրիտիկական բովանդակությունը, որը օգտվողը տեսավ, դեռ ընկնում է 14 կբ սկզբնական բեռի մեջ, երբ սեղմվում է: Այս գործընթացն է, որն օգնում է կոտրել այդ 1000 մմ մատուցման արգելքը:
Պայմանական և ծույլ բեռ
Պայմանական բեռը բարելավում է օգտագործողի փորձը ՝ հիմնվելով նրա սարքի առանձնահատկության վրա: Modernizr- ի նման գործիքները թույլ են տալիս ստուգել այդ հատկությունները, բայց տեղյակ եղեք, որ զուտ զննարկիչն ասում է, որ աջակցություն է առաջարկում, դա միշտ չէ, որ նշանակում է լիարժեք աջակցություն:
Տեխնիկայից մեկն այն է, որ ինչ-որ բան բեռնելուց զերծ պահել, մինչև օգտվողը ցույց տա այդ հատկությունը օգտագործելու մտադրություն: Սա կդիտարկվեր որպես պայմանական: Դուք կարող եք զսպել սոցիալական սրբապատկերների բեռնումը, մինչև օգտվողը սավառնել կամ դիպչի սրբապատկերներին, կամ կարող եք խուսափել iframe Google Map- ի բեռնումից ավելի փոքր դիտակետերում, որտեղ օգտվողը, հավանաբար, կնախընտրի կապվել հատուկ քարտեզագրական ծրագրի հետ: Մեկ այլ մոտեցում է «Կտրել մանանեխը». Այս մասին մանրամասների համար տե՛ս վերը նշված վանդակում:
Lazույլ բեռը սահմանվում է որպես մի բան, որը դուք միշտ մտադիր եք բեռնել էջում ՝ հոդվածներ, մեկնաբանություններ կամ հարակից այլ հոդվածներ պարունակող պատկերներ, բայց որոնք անհրաժեշտ չեն այնտեղ, որպեսզի օգտագործողը սկսի սպառել բովանդակությունը:
Հիմնական
- Միացնել ֆայլերի համար gzipping- ը և ամբողջ ստատիկ բովանդակության համար սահմանել ժամկետի ավարտի վերնագրեր (netm.ag/ Expire-260)
- Օգտագործեք Lazy Load jQuery հավելվածը: Սա բեռնում է պատկերներ տեսադաշտին մոտենալիս կամ որոշակի ժամանակահատվածից հետո
Առաջադեմ
- Կարգավորեք արագ կամ CloudFlare: Բովանդակության առաքման ցանցերը (CDN) ձեր ստատիկ բովանդակությունն ավելի արագ են մատուցում օգտվողներին, քան ձեր սեփական սերվերը և ունեն որոշ անվճար մակարդակներ
- Միացրեք SPDY- ը http2 հնարավորություն ունեցող զննարկիչների համար `օգտվելով http2 հատկություններից, ինչպիսիք են զուգահեռ http հարցումները
- Social Count- ը թույլ է տալիս պայմանական բեռնել ձեր սոցիալական պատկերակները
- Static Maps API- ի օգտագործումը թույլ կտա ձեզ անջատել Google- ի ինտերակտիվ քարտեզները պատկերների համար: Նայեք Բրեդ Ֆրոստի օրինակին netm.ag/static-260 կայքում
- Ajax Include Pattern- ը բեռնելու է բովանդակության հատվածներ կամ տվյալների առաջ, տվյալների հաջորդումից կամ տվյալների փոխարինման հատկանիշից
Պատասխանատու տպագրություն
Տպագրությունը `ձեր բովանդակությունը դյուրամարս դարձնելու մասին է: Պատասխանատու տպագրությունը տարածում է սա `ապահովելու ընթերցանությունը սարքերի և դիտումների մեծ տեսականիով: Jordanորդան Մուրը խոստովանում է, որ տեսակը մի բան է, որի վրա նա պատրաստ չէ շարժվել: Անհրաժեշտության դեպքում թողեք մեկ կամ երկու պատկեր, բայց համոզվեք, որ հիանալի տեսակ ունեք:
Սթիվեն Հեյը առաջարկում է HTML տառատեսակի չափը սահմանել 100 տոկոս (կարդալ. Պարզապես թողեք այն այնպես, ինչպես կա), քանի որ յուրաքանչյուր դիտարկիչ կամ սարքի արտադրող խելամտորեն ընթերցվող դեֆոլտ է դնում որոշակի բանաձևի կամ սարքի համար: Սեղանի զննարկիչների մեծ մասի համար սա 16px է:
Մյուս կողմից, Մուրը օգտագործում է REM միավորը և HTML տառատեսակի չափը `որոշակի բովանդակության տարրերի համար նվազագույն տառաչափ սահմանելու համար: Օրինակ, եթե ուզում եք, որ հոդվածի շարադրանքը միշտ լինի 14 px, ապա դրեք այն որպես HTML տառի բազայի մեծ տառատեսակ և սահմանեք .byline {font-size: 1rem;}: Մարմինը լայնացնելիս ՝ font-size: Տեսադաշտին համապատասխանելու համար դուք չեք ազդի .by-line ոճի վրա:
Կարևոր է նաև ընթերցանության լավ տևողությունը. Նպատակ ունեն 45-ից 65 նիշ: Կա էջանիշ, որը կարող եք օգտագործել ձեր բովանդակությունը ստուգելու համար: Եթե ձեր դիզայնով աջակցում եք բազմաթիվ լեզուների, ապա գծի երկարությունը կարող է նաև տարբեր լինել: Մուրն առաջարկում է օգտագործել `lang (de) հոդվածը {max-width: 30em}` այնտեղ առկա խնդիրները ծածկելու համար:
Ուղղահայաց ռիթմը պահպանելու համար սահմանիր մարժայի տակը բովանդակության բլոկների, ul>, ol>, blockquote>, աղյուսակ>, blockquote> և այլն, նույնը, ինչպես քո գծի բարձրությունը: Եթե ռիթմը ընդհատվում է պատկերների ներմուծմամբ, կարող եք ուղղել այն ՝ ավելացնելով Baseline.js կամ BaselineAlign.js:
Հիմնական
- Ձեր տառատեսակը հիմնեք 100 տոկոսի մարմնի վրա
- Աշխատել հարաբերական միավորներում
- Սահմանեք ձեր մարժաները ձեր գծի բարձրության վրա ՝ ձեր ձևավորման մեջ ուղղահայաց ռիթմը պահպանելու համար
Առաջադեմ
- Enhance.js- ով բարելավել տառատեսակի բեռնումը կամ հետաձգել տառատեսակի բեռնումը
- Իմաստային վերնագրերի համար օգտագործեք Sass @includes:
- Հաճախ մենք պետք է օգտագործենք h5 ոճը կողային վարի widget- ում, որը պահանջում է h2 նշագրում: Օգտագործեք Bearded’s Typographic Mixins- ը ՝ չափը վերահսկելու և ստորև նշված կոդով իմաստային մնալու համար.
.sidebar h2 {@ ներառել վերնագիր -5}
MediaԼՄ-ների հարցումներ JavaScript- ում
Այն պահից, երբ մեդիայի հարցումների միջոցով կարողացանք վերահսկել տեսապատկերի տարբեր տեսադաշտերի դասավորությունը, մենք փնտրում էինք միջոց, որպեսզի դա կապենք նաև մեր JavaScript- ի գործարկման հետ: JavaScript- ը կրակելու մի քանի եղանակներ կան տեսադաշտի որոշակի լայնությունների, բարձունքների և կողմնորոշումների վրա, և որոշ խելացի մարդիկ գրել են մի քանի հեշտ օգտագործման բնիկ JS պլագիններ, ինչպիսիք են Enquire.js և Simple State Manager: Դուք նույնիսկ կարող եք դա կառուցել ՝ օգտագործելով matchMedia: Այնուամենայնիվ, դուք ունեք խնդիր, որ դուք պետք է կրկնօրինակեք ձեր լրատվամիջոցների հարցումները ձեր CSS- ում և JavaScript- ում:
Ահարոն Գուստաֆսոնը ունի կոկիկ հնարք, ինչը նշանակում է, որ ձեզ հարկավոր չէ կառավարել և համապատասխանեցնել ձեր CSS- ի և JS- ի ձեր լրատվամիջոցների հարցումները: Գաղափարն ի սկզբանե եկել է remերեմի Քիթին, և այս օրինակում Գուստաֆսոնը այն հասցրել է լիարժեք իրականացման:
GetActiveMQ (netm.ag/media-260) օգտագործմամբ մարմնի տարրի վերջում ներարկեք div # getActiveMQ-watcher և թաքցրեք այն: Այնուհետև CSS- ի սահմաններում # getActiveMQ-watcher {font-family: break-0;} առաջին լրատվամիջոցների հարցմանը, font-family: break-1; երկրորդին ՝ տառատեսակների ընտանիքին ՝ break-2; երրորդին և այլն:
Սցենարն օգտագործում է watchResize () (netm.ag/resize-260) ՝ ստուգելու համար, թե արդյոք տեսադաշտի չափը փոխվել է, և այնուհետև կարդում է ակտիվ տառատեսակների ընտանիքը: Այժմ կարող եք սա օգտագործել JS- ի ընդլայնումները որսալու համար, ինչպիսիք են `տողանշված ինտերֆեյս ավելացնելը dl> երբ տեսադաշտը թույլ է տալիս, փոխել լուսատուփի վարքագիծը կամ թարմացնել տվյալների աղյուսակի դասավորությունը: Ստուգեք getActiveMQ ծածկագիրը ՝ netm.ag/active-260:
Հիմնական
- Մոռացեք JavaScript- ի մասին տարբեր տեսադաշտերի համար: Տրամադրեք օգտվողներին բովանդակություն և կայքի գործառույթներ այնպես, որ նրանք կարողանան մուտք գործել այն բոլոր դիտադաշտերում: Մենք երբեք պետք չէ JavaScript- ի կարիք ունենալ
Առաջադեմ
- Ընդլայնել Գուստաֆսոնի մեթոդը ՝ օգտագործելով Breakup- ը ՝ որպես մեդիայի հարցումների նախորոշված ցուցակ և ավտոմատացնելով տառատեսակների ընտանիքների ցուցակի ստեղծումը getActiveMQ-watcher- ի համար:
Առաջադիմական ուժեղացում
Առաջադեմ բարելավման վերաբերյալ տարածված սխալ պատկերացումն այն է, որ մարդիկ մտածում են. «Դե լավ, ես չեմ կարող օգտագործել այս նոր առանձնահատկությունը», բայց իրականում դա հակառակը է: Առաջադեմ բարելավումը նշանակում է, որ դուք կարող եք հատկություն հատկացնել, եթե այն աջակցվում է միայն մեկ կամ նույնիսկ առանց զննարկիչներից, և ժամանակի ընթացքում մարդիկ ավելի լավ փորձ կստանան, երբ նոր տարբերակները հայտնվեն:
Եթե նայեք որևէ կայքի հիմնական գործառույթին, ապա այն կարող եք մատուցել որպես HTML և սերվերի կողմից թող կատարել ամբողջ մշակումը: Վճարներ, ձևեր, հավանումներ, համօգտագործում, էլ. Փոստեր, գործիքակալի. Այդ ամենը կարելի է անել: Հիմնական խնդիրը կառուցվելուն պես մենք կարող ենք դրա վրա շերտավորել հիանալի տեխնոլոգիաները, քանի որ մենք ունենք անվտանգության ցանց `դրանցով անցնողներին որսալու համար: Առաջադեմ մոտեցումների մեծ մասը, որի մասին մենք այստեղ խոսեցինք, հիմնված է առաջադեմ կատարելագործման վրա:
Դասավորություն
Flexibleկուն դասավորությունը պարզ է ասել, բայց այն ունի շատ տարբեր մոտեցումներ: Ստեղծեք ցանցի պարզ դասավորություններ ՝ ավելի քիչ նշագրմամբ, օգտագործելով ՝ nth-child () ընտրիչը:
/ * հայտարարեք բջջայինի առաջին լայնությունը ցանցի համար * / .grid-1-4 {float: left; լայնությունը `100%; } / * Երբ դիտման պորտը առնվազն 37.5em է, ապա ցանցը դրեք 50% -ով յուրաքանչյուր տարրի համար * / @media (min- լայնությունը `37.5em) {.grid-1-4 {width: 50%; } / * Մաքրել բոցը յուրաքանչյուր երկրորդ տարրից `առաջինից հետո: Սա ուղղված է ցանցում 3-րդ, 5-րդ, 7-րդ, 9-րդին: * / .grid-1-4: տիպի nth (2n + 1) {պարզ: ձախ; }} @media (min- լայնությունը `64em) {.grid-1-4 {լայնությունը` 25%; } / * Հեռացնել նախորդ մաքրումը * / .grid-1-4: տիպի nth (2n + 1) {մաքրել: ոչ; } / * Մաքրել բոցը յուրաքանչյուր 4-րդ տարրից առաջինից հետո: Սա ուղղված է ցանցում 5-րդ, 9-րդ ...- ին: * / .grid-1-4: տիպի nth (4n + 1) {պարզ: ձախ; }}
Հրաժեշտ տվեք ձեր դասավորության համար դիրքի և բոց օգտագործելու գործին: Չնայած նրանք մինչ օրս մեզ լավ են ծառայել, դրանց օգտագործումը դասավորության համար անհրաժեշտ հակեր է եղել: Այժմ մենք ունենք երկու նոր երեխա բլոկում, որոնք կօգնեն շտկել մեր դասավորության բոլոր խնդիրները ՝ Flexbox և Grids:
Flexbox- ը հիանալի է առանձին մոդուլների համար `վերահսկելով յուրաքանչյուր մոդուլի ներսում պարունակության կտորների դասավորությունը: Գոյություն ունեն այնպիսի դասավորություններ, որոնք մենք փորձում ենք մատուցել, որոնք ավելի հեշտությամբ կարելի է ձեռք բերել Flexbox- ի միջոցով, և դա առավել ճշմարիտ է պատասխանատու կայքերի դեպքում: Այս մասին ավելին իմանալու համար տեսեք CSS Tricks- ի ուղեցույց Flexbox- ին կամ Flexbox Polyfill- ին:
CSS ցանցի դասավորություն
Ridանցը ավելի շատ մակրո մակարդակի դասավորության համար է: Ridանցի դասավորության մոդուլը ձեզ հիանալի միջոց է տալիս նկարագրել ձեր դասավորությունը ձեր CSS- ի շրջանակներում: Չնայած այս պահին դեռ նախագծի փուլում է, ես խորհուրդ եմ տալիս այս հոդվածը Ռեյչել Էնդրյուի CSS ridանցի դասավորության վերաբերյալ:
Վերջապես
Սրանք ընդամենը մի քանի խորհուրդներ են ՝ ձեր պատասխանատու պրակտիկան ընդլայնելու համար: Anyանկացած նոր պատասխանատու գործին մոտենալիս ՝ մի քայլ հետ արեք և համոզվեք, որ հիմունքները ճիշտ կստանաք: Սկսեք ձեր բովանդակությունից, HTML- ից և շերտի վրա դրանց բարելավված փորձից, և որևէ սահմանափակում չի լինի, թե որտեղ կարող եք վերցնել ձեր նմուշները:
Այս հոդվածն ի սկզբանե հայտնվել է 260-րդ համարում ցանց ամսագիր.
