Ինչպես եք գրում CSS մեդիա հարցումները:

Սինթետիկ, այնպես էլ մինիմալ լայնության եւ առավելագույն լայնության լրատվամիջոցների հարցումների համար

Պատասխանատու վեբ դիզայնը ինտերնետային էջերի ստեղծման մոտեցում է, որտեղ այդ էջերը կարող են դինամիկ կերպով փոխել իրենց դասավորությունը եւ արտաքին տեսքը այցելուի էկրանին : Խոշոր էկրանները կարող են ստանալ այն ավելի մեծ դիսփլեյներին հարմար տեղադրություն, իսկ փոքր սարքերը, ինչպես բջջային հեռախոսները, կարող են նույն ձեւաչափով ֆորմատավորել այն նույն ձեւով, որը հարմար է այդ փոքր էկրանին: Այս մոտեցումը բոլոր օգտվողների համար ավելի լավ օգտվողների փորձ է ապահովում, եւ այն կարող է օգնել նաեւ բարելավել որոնողական համակարգի աղյուսակը : Հաճախակի վեբ դիզայնի կարեւոր մասն է CSS Media հարցումները:

ԶԼՄ-ների հարցումները նման են ձեր կայքի CSS- ի ֆայլի մեջ քիչ պայմանական հայտարարություններին, որոնք թույլ են տալիս որոշել CSS- ի որոշակի կանոններ, որոնք միայն ազդում են որոշակի պայմանների վրա, ինչպիսին է էկրանի չափը որոշակի շեմերի վերեւից կամ ներքեւից:

ԶԼՄ-ների հարցումներ գործողության մեջ

Այսպիսով, ինչպես եք օգտագործում ԶԼՄ-ների հարցումները կայքէջում: Ահա շատ պարզ օրինակ.

1. Դուք սկսում եք լավ կառուցված HTML փաստաթուղթից առանց որեւէ տեսողական ոճերի (այսինքն, CSS- ն է)
2. Ձեր CSS ֆայլում դուք կսկսեն սկսել, քանի որ սովորաբար անում եք էջը ոճավորելը եւ հիմք ստեղծելու համար, թե ինչպես է նայելու կայքը: Ասացեք, որ էջի տառաչափը 16 պիքսել է, կարող եք գրել այս CSS- ը: body {font-size: 16px; }
3. Այժմ, հնարավոր է, որ այդ տառաչափը մեծացնեն ավելի մեծ էկրանների համար, որոնք անշարժ գույք ունեն: Սա այն դեպքն է, երբ ԶԼՄ-ների հարցումները սկիզբ են առնում: Դուք կստանաք Media Query- ի նման `@media էկրան եւ (min-width: 1000px) {}
4. Սա Media Query- ի համառոտ շարադրանքն է: Այն սկսվում է @ media- ից Media Query- ի ստեղծման համար: Հաջորդում եք «մեդիա տիպը», որը այս դեպքում «էկրան» է: Սա վերաբերում է աշխատասեղանի համակարգչային էկրաններին, հաբերին, հեռախոսներին եւ այլն: Վերջապես, դուք լրացնում եք Media Query- ը «լրատվամիջոցների առանձնահատկությունը»: Վերոնշյալ մեր օրինակին, այսինքն, «միջին լայնությունը` 1000px »: Սա նշանակում է, որ ԶԼՄ-ների հարցումը կսկսվի լայնածավալ 1000 պիքսել լայնությամբ ցուցադրման համար:

1. Լրատվամիջոցների հարցման այս տարրերից հետո դուք ավելացնում եք բացման եւ փակման գանգրացնող բռնակներ, որոնք նման են սովորական CSS կանոնում:
2. Լրատվամիջոցների հարցմանը վերջնական քայլը պետք է ավելացնի CSS կանոնները, որոնք ցանկանում եք կիրառել, երբ այս պայմանը բավարարվի: Դուք ավելացնում եք այս CSS կանոնները, այսպես կոչված, Media Query- ի գանգրացնող բռնակների միջեւ, @media էկրան եւ (min-width: 1000px) {body {font-size: 20px; }
3. Երբ Media Query- ի պայմանները համապատասխանում են (զննարկիչի պատուհանը առնվազն 1000 փիքսել լայն է), այս CSS- ի ոճը ուժի մեջ կմտնի, մեր կայքի տառաչափը փոփոխելով, սկզբից ձեւավորելով 16 պիքսելից 20 լիտր նոր արժեք:

Լրացուցիչ ոճերի ավելացում

Կարող եք տեղադրել այս CSS- ի CSS- ի կանոնները, այս կայքում, ինչպես նաեւ անհրաժեշտ է ձեր կայքի տեսողական տեսքը կարգավորելու համար: Օրինակ, եթե ցանկանում եք ոչ միայն բարձրացնել տառաչափը 20 պիքսել, այլեւ փոխել բոլոր պարբերությունների գույնը սեւ (# 000000), կարող եք ավելացնել հետեւյալը.

@media էկրան եւ (min-width: 1000px) {body-font-size: 20px; } p {գույնը `# 000000; }}

Մանրամասն մեդիա հարցումների ավելացում

Բացի այդ, դուք կարող եք ավելացնել լրացուցիչ ԶԼՄ հարցումներ ավելի մեծ չափերի համար, դրանք ավելացնելով ձեր ոճաթերթին:

@media էկրան եւ (min-width: 1000px) {body-font-size: 20px; } p {գույնը `# 000000; {} @ մեդիա էկրան եւ (min-width: 1400px) {body {font-size: 24px; }}

Առաջին ԶԼՄ-ների հարցումները կսկսվեն 1000 պիքսել լայնությամբ, փոխելով տառատեսակը 20 պիքսել: Այնուհետեւ, երբ բրաուզերը 1400 պիքսելից բարձր էր, տառաչափը կրկին փոխվեց 24 պիքսել: Դուք կարող եք ավելացնել այնքան, որքան ԶԼՄ-ների որոնումները, որքան անհրաժեշտ է ձեր կոնկրետ կայքի համար:

Min-width եւ Max- լայնությունը

Կան ընդհանուր առմամբ ԶԼՄ-ների հարցումները գրելու երկու եղանակ `օգտագործելով« min width »կամ« max-width »: Առայժմ մենք տեսանք «մինի լայնություն» գործողության մեջ: Սա առաջացնում է ԶԼՄ-ների հարցումներ, երբ զննարկիչը հասել է առնվազն այդ նվազագույն լայնությանը: Այսպիսով, «min-width: 1000px» օգտագործող հարցումը կիրականացվի, երբ զննարկիչը առնվազն 1000 պիքսել լայն է: Մեդիա Հարցման այս ոճը օգտագործվում է այն ժամանակ, երբ դուք «կայքէջ» կառուցում եք «շարժական առաջին» ձեւով:

Եթե ​​օգտագործում եք "max-width", ապա դա հակառակ ձեւով է գործում: ԶԼՄ-ների համար «առավել լայնությունը` 1000px »հարցումը կիրականացվի, երբ զննարկիչը ընկել է այս չափսից:

Ավելի հին բրաուզերների վերաբերյալ

ԶԼՄ-ների հարցումներից մեկի խնդիրն այն է, որ Internet Explorer- ի հին տարբերակներում իրենց աջակցությունը չլինի: Բարեբախտաբար, կան պոլիֆիլներ, որոնք կարող են աջակցել Media Browsers- ի այն հին բրաուզերներում, որոնք թույլ են տալիս դրանք օգտագործել այսօրվա կայքերում, մինչդեռ ապահովում են, որ այդ կայքի ցուցադրումը չի տեսել ավելի խոշոր բրաուզերի ծրագրերում:

Խմբագրվել է Ջերեմի Գիրարդը 1/24/17 թ .: