Ձեր Վեբ էջի լայնությունը սահմանելը

Առաջին բանը, ըստ դիզայներների, կառուցելիս, իրենց ինտերնետային էջը կառուցելն այն է, թե ինչ բանաձեւ է մշակելու համար: Ինչ է սա նշանակում է որոշել, թե որքան լայն է ձեր դիզայնը: Նման բան այլեւս չկա, որպես ստանդարտ կայքի լայնություն:

Ինչու քննարկենք բանաձեւը

1995 թվականին ստանդարտ 640x480 թույլատրող մոնիտորները եղել են ամենամեծ եւ ամենալավ մոնիտորները: Սա նշանակում է, որ վեբ դիզայներները կենտրոնացած են այնպիսի էջեր պատրաստելու վրա, որոնք լավ էին նայում վեբ-բրաուզերներում, որոնք առավելագույնի հասցվեցին այդ բանաձեւում 12-դյույմից մինչեւ 14 դյույմ մոնիտոր:

Այս օրերին 640x480 բանաձեւը կազմում է կայքի թրաֆիքի մեծամասնության ավելի քան 1 տոկոսը: Մարդիկ շատ ավելի բարձր բանաձեւեր են օգտագործում համակարգիչները, ներառյալ 1366x768, 1600x900 եւ 5120x2880: Շատ դեպքերում նախագծում է 1366x768 բանաձեւի էկրան:

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

Զննիչի լայնությունը

Նախքան մտածում ես դուրս գալ, «լավ, ես իմ էջերը կտամ 1366 պիքսել լայն», այս պատմությունը ավելի շատ է: Վեբ էջի լայնությունը որոշելու ժամանակ հաճախ անտեսված խնդիրը այն է, թե որքան մեծ է ձեր հաճախորդները պահպանում իրենց բրաուզերները: Մասնավորապես, արդյոք նրանք մեծացնում են իրենց բրաուզերները լիարժեք էկրանին կամ դրանք պահում են փոքրից, քան ամբողջական էկրանը:

Համատեղ աշխատողների մեկ ոչ ֆորմալ հարցում, որոնք բոլորն օգտագործում էին ընկերության 1024x768 ստանդարտ նոութբուքը, երկուսը պահում էին իրենց բոլոր ծրագրերը առավելագույնը: Մնացածը զանազան տեսակի պատուհաններ բաց էին տարբեր պատճառներով: Սա ցույց է տալիս, որ եթե դուք նախագծում եք այս ընկերության ներցանցային ցանցը 1024 փիքսել լայնությամբ, ապա օգտագործողների 85% -ը պետք է ոլորել հորիզոնական `ամբողջ էջը տեսնելու համար:

Հետո հաշվարկեք այն հաճախորդների համար, ովքեր մեծացնում են կամ չեն անում, մտածեք բրաուզերի սահմանների մասին: Յուրաքանչյուր վեբ զննարկիչ ունի ոլորման գոտի եւ սահմանների կողմերը, որոնք կրճատում են հասանելի տարածությունը 800-ից մինչեւ 740 պիքսել կամ պակաս 800x600 բանաձեւերում եւ մոտ 980 պիքսել 1024x768 բանաձեւերի առավելագույնացված պատուհաններում: Սա կոչվում է զննարկիչ "chrome" եւ այն կարող է հեռու օգտագործել ձեր տարածքի նախագծման համար:

Ֆիքսված կամ հեղուկ լայնությամբ էջեր

Փաստացի թվային լայնությունը ոչ միայն այն է, ինչ անհրաժեշտ է մտածել ձեր կայքի լայնությունը նախագծելու ժամանակ: Դուք նաեւ պետք է որոշեք, թե արդյոք կունենաք ֆիքսված լայնություն կամ հեղուկ լայնություն : Այլ կերպ ասած, դուք մտադիր եք լայնությունը սահմանել որոշակի քանակով (ֆիքսված) կամ տոկոսով (հեղուկ):

Ֆիքսված լայնություն

Ֆիքսված լայն էջերը հենց այնպես են հնչում: Լայնությունը ամրագրված է որոշակի քանակով եւ չի փոխում, թե որքան մեծ կամ փոքր է զննարկիչը: Սա կարող է լավ լինել, եթե դուք պետք է ձեր դիզայնը նայեք հենց նույնը, անկախ նրանից, թե որքան լայն է կամ նեղ ձեր ընթերցողների բրաուզերները, բայց այս մեթոդը հաշվի չի առնում ձեր ընթերցողներին: Բրաուզեր ունեցող մարդիկ նեղ են, քան ձեր դիզայնը պետք է գլորել հորիզոնական եւ լայն բրաուզեր ունեցող մարդիկ կունենան մեծ քանակությամբ դատարկ տարածություն էկրանին:

Կայուն լայնության էջեր ստեղծելու համար պարզապես օգտագործեք հատուկ խտության թվեր ձեր էջի բաժանումների լայնության համար:

Հեղուկի լայնություն

Հեղուկի լայնությունը էջերը (երբեմն անվանում են ճկուն լայնություններ) տարբերվում են լայնությունից, կախված նրանից, թե որքան լայն է զննարկիչի պատուհանը: Սա թույլ է տալիս նախագծել էջեր, որոնք ավելի շատ ուշադրություն են դարձնում ձեր հաճախորդներին: Լիկվիդ լայնության հետ կապված խնդիրը այն է, որ դրանք կարող են դժվար լինել կարդալ: Եթե ​​տեքստի գծի սկանավորումը երկար է 10-ից 12 բառով կամ 4-ից 5 բառից ավելի կարճ է, կարող է դժվար լինել կարդալ: Սա նշանակում է, որ մեծ կամ փոքր զննարկիչի պատուհանների հետ ընթերցողները խնդիրներ ունեն:

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

Իսկ հաղթողը `CSS Մեդիա Հարցումներ

Լավագույն լուծումը այս օրերին CSS- ի լրատվամիջոցների հարցումներն ու պատասխանատու դիզայնն օգտագործելու համար ստեղծում է այն էջը, որը հարմարեցնում է դիտարկիչի լայնությանը: Հուսալի վեբ դիզայնը օգտագործում է նույն բովանդակությունը, որը ստեղծում է այն վեբ էջը, որը աշխատում է այն դիտել այն 5120 պիքսել լայնությամբ կամ 320 պիքսել լայնությամբ: Տարբեր չափսի էջերը տարբեր են, բայց դրանք պարունակում են նույն բովանդակությունը: CSS3- ի լրատվամիջոցների հարցման հետ կապված, յուրաքանչյուր ընդունող սարքը հարցմանը պատասխանում է իր չափերով, եւ ոճաթերթիկը հարմարվում է տվյալ չափի: