Ո՞րն է տարբերությունը em- ի և px- ի միջև CSS- ում:


պատասխանել 1:

Ի վերջո, դա բոլոր պիքսելներն են

Ի վերջո, վեբ զննարկիչը հրահանգում է օպերացիոն համակարգին ցուցադրել էկրանի վարորդին `պիքսելների ինչ-որ բան էկրան բերել:

Այնուամենայնիվ, այս «պիքսել» -ը ֆիզիկական պիքսել է: Դա այն է, ինչ մենք կարող ենք անվանել «սարքի պիքսել»:

Դուք չեք խոսում «սարքի պիքսելների» մասին: Դուք խոսում եք CSS պիքսելների մասին:

CSS պիքսել: == պիքսել

«CSS պիքսել» սարքի պիքսելի նման է: [1] CSS պիքսելը հիմնված է «հղման պիքսել» գաղափարի վրա, որը պիքսելային խտությամբ 96 դպիչի սարքի դիտման անկյունն է, մոտավորապես մեկ բազկի հեռավորության վրա: [2] Մաթեմատիկայի ուժի շնորհիվ «տեղեկատու պիքսել» -ը կարող էր ավարտվել 1.3 մմ էկրանով: Այնուամենայնիվ, կան մի շարք պատճառներ, որոնք կարող են այդպես չլինել:

Կարևոր է, որ մենք սկսենք այն հիմնական կետից, որ px- ը չի նշանակում «էկրանին փիքսել»:

CSS- ում կան չափման տարբեր միավորներ

Ձեր չափման միավորների երկու հիմնական կատեգորիա կա.

  1. բացարձակ միավորների հարաբերական միավորներ

Եթե ​​դա «բացարձակ միավոր» է, ապա չափման այս միավորը կապ ունի ինչ-որ բանի հետ ֆիզիկական աշխարհում:

Եթե ​​դա հարաբերական միավոր է, արժեքը հաշվարկվում է բացարձակ միավորով:

Այսպիսով, px vs em

px- ը «բացարձակ միավոր» է; CSS շարժիչը զննարկչին հրահանգում է օգտագործել այս «երկարությունը» չափի համար: Զննարկիչը և գործավար համակարգը տեսակավորում և ներկայացնում են, թե ինչպես է այս երկարությունը համեմատվում «սարքի պիքսել» -ի հետ: Px- ը ստատիկ կապ ունի «հղման պիքսել» -ի հետ, որի մասին մենք ավելի վաղ խոսեցինք: px դա չի փոխվի:

em- ը «հարաբերական միավոր» է: CSS շարժիչը նախ հաշվարկում է այս արժեքը պիքսելային երկարությամբ: Պիքսելային երկարության հաշվարկից հետո հաշվարկված արժեքը փոխանցվում է զննարկչին: em- ը հաշվարկվում է մասնավորապես `հիմնվելով իր պարունակած տարրի տառատեսակի չափի վրա: Em- ի արժեքը կարող է փոխվել; Ծնողի տարրի տառատեսակի չափը փոխելը ազդում է em- ի արժեքի վրա:

Դրանց մասին մտածելու լավագույն միջոցը ձևացնելը, որ em bit- ը բացակայում է և արժեքը վերաբերվում է որպես բազմապատկողի: օրինակ.

.foo {տառաչափը `1.5em; / * շփոթեցնող * / տառատեսակի չափը `1.5; / * Վավեր չէ, բայց այն պետք է օգտագործվի ամբողջությամբ `em * / line-height: 1.5; / * տեսեք, թե ինչպես տողի բարձրությունը ընդունում է բազմապատկիչը առանց միավորի: * /}

Այնպես որ, առաջին մեծ տարբերությունն այն է, որ մեկը բացարձակ է, իսկ մյուսը ՝ հարաբերական:

px և em օգտագործման մեջ

Տարբեր իրավիճակները կներկայացնեն յուրաքանչյուր միավորի ուժեղ և թույլ կողմերը [4]:

Քանի որ px- ը չափման բացարձակ միավոր է, դուք կանխատեսելիության բարձր աստիճան ունեք էկրանին ձեռք բերվածի համար: Բայց դուք համաչափություն չունեք. Px չափսի հատկությունները չեն հաշվարկվում, երբ ծնողում տառատեսակի չափը կարգավորեք:

Այսպիսով, դուք հաճախ բախվում եք դրան.

body {տառաչափը ՝ 16px;} h1 {տառաչափը ՝ 32 px; / * բացարձակ միավորներ տառատեսակի չափի համար * / padding: 8px 16px; / * բացարձակ միավորներ ՝ լրացնելու համար * /} .foo {տառաչափը ՝ 12px; / * Կարգավորեք տառաչափի չափը ավելի բարձր մակարդակի տարրով * /} / * գրեք նոր կանոն, որը կկազմի համամասնությունը ապահովելու համար * / .foo h1 {տառաչափը `24px; / * վերաշարադրել տառատեսակի կանոն `h1 2x- ը նորմալ դարձնելու համար * / padding: 6px 12px; / * Վերաշարադրեք 1/4 և 1/2 * / * համար

Քանի որ em- ը հարաբերական միավոր է, որը հիմնված է ժառանգված տառատեսակի չափի վրա, էկրանին ստացված ձեր կանխատեսելիությունը կարող է վատ լինել, հատկապես մեծ թիմերում: Բայց դուք շատ համաչափ կլինեք; Հատկությունները, որոնց չափը դրված է em- ում, վերահաշվարկվում են, եթե ծնողի տարրում եք տառատեսակի չափը:

body {տառաչափը ՝ 16px;} h1 {տառաչափը ՝ 2em; / * հարաբերական միավոր * / padding: .25em .5em; / * հարաբերական միավորներ լիցքավորման համար * /} .foo {տառաչափը .7575; }

Այսպիսով, դուք պահպանեցիք em- ով սահմանված մի ամբողջ կանոնների գրությունը: 24px- ի վրա հաշվարկված տառատեսակի չափը և լիցքավորումը հաշվարկվում է 6px 12px- ով:

Այսպիսով, մեծ տարբերությունն այն է, որ կարողությունը համամասնական լինի իրերի չափերին `առանց ավելի շատ ծածկագիր գրելու:

Եբր. Տողեր

[1] Սինթաքսի և տվյալների հիմնական տեսակները

[2] Մոդուլի մակարդակ 3 CSS արժեքների և միավորների համար

[3] Ինչպե՞ս են «em», «px» և «%» տարբերությունները CSS- ում:

[4] Պատասխանատու կայքերը ամեն ինչ չափելու մասին են (ձեր CSS- ում):


պատասխանել 2:

px- ն պիքսել է: Այն կարող է տարբեր զննարկիչների մեջ մի փոքր տարբեր լինել, բայց, ամենայն հավանականությամբ, հետևողական է նույն միջավայրում և որոշակի զննարկչի / սարքի կայքում: px- ը իմաստ ունի բաների և սահմանի լայնության համար:

em- ը ընթացիկ տարրի տառատեսակի չափն է (որը հիմնականում ժառանգվում է): Այսպիսով, եթե տառատեսակի չափը փոխվում է, em- ի արժեքը նույնպես փոխվում է: Սա օգտակար է այն դեպքում, երբ ցանկանում եք որևէ բան տեղադրել տեքստի ներկայիս չափի համեմատ: Այն նաև օգտակար է, քանի որ այն համեմատելի է այլ բովանդակության հետ, ուստի ավելի հավանական է, որ աշխատեք էկրաններին: em- ը հատկապես օգտակար է տարածքներ, սահմաններ և լիցքավորելու տեքստը տեղադրելու համար:

rem- ը root em- ն է: Դա նման է em- ի, բայց փոխանակ համեմատելու ընթացիկ տառատեսակի չափին, այն համեմատ է փաստաթղթի բնօրինակ տառատեսակի չափի հետ: Սա նշանակում է, որ ռեմը մնում է հետևողական էջում ՝ անկախ ներկայիս տառատեսակից: Ռեմի հետ աշխատելը շատ իրավիճակներում ավելի հեշտ է, քանի որ այն առավել կանխատեսելի է: Սա հատկապես օգտակար է լուսանցքների համար, որոնք պետք է մնան հետևողական փաստաթղթում, նույնիսկ եթե տառատեսակների տեղական չափերը փոխվեն տարրերի միջև:

Ընդհանուր առմամբ, em- ը և Rem- ը ավելի հեշտ են պահպանել էջում, և ընդհանուր համաձայնությունը ներկայումս px- ի փոխարեն em- ն և Rem- ն օգտագործելն է: Ընդհանուր համաձայնությունը միշտ չէ, որ ճիշտ է, բայց դա կատարելու լավ միջոց է, քանի դեռ այլ կերպ վարվելու պատճառ չունեք:


պատասխանել 3:

px- ն պիքսել է: Այն կարող է տարբեր զննարկիչների մեջ մի փոքր տարբեր լինել, բայց, ամենայն հավանականությամբ, հետևողական է նույն միջավայրում և որոշակի զննարկչի / սարքի կայքում: px- ը իմաստ ունի բաների և սահմանի լայնության համար:

em- ը ընթացիկ տարրի տառատեսակի չափն է (որը հիմնականում ժառանգվում է): Այսպիսով, եթե տառատեսակի չափը փոխվում է, em- ի արժեքը նույնպես փոխվում է: Սա օգտակար է այն դեպքում, երբ ցանկանում եք որևէ բան տեղադրել տեքստի ներկայիս չափի համեմատ: Այն նաև օգտակար է, քանի որ այն համեմատելի է այլ բովանդակության հետ, ուստի ավելի հավանական է, որ աշխատեք էկրաններին: em- ը հատկապես օգտակար է տարածքներ, սահմաններ և լիցքավորելու տեքստը տեղադրելու համար:

rem- ը root em- ն է: Դա նման է em- ի, բայց փոխանակ համեմատելու ընթացիկ տառատեսակի չափին, այն համեմատ է փաստաթղթի բնօրինակ տառատեսակի չափի հետ: Սա նշանակում է, որ ռեմը մնում է հետևողական էջում ՝ անկախ ներկայիս տառատեսակից: Ռեմի հետ աշխատելը շատ իրավիճակներում ավելի հեշտ է, քանի որ այն առավել կանխատեսելի է: Սա հատկապես օգտակար է լուսանցքների համար, որոնք պետք է մնան հետևողական փաստաթղթում, նույնիսկ եթե տառատեսակների տեղական չափերը փոխվեն տարրերի միջև:

Ընդհանուր առմամբ, em- ը և Rem- ը ավելի հեշտ են պահպանել էջում, և ընդհանուր համաձայնությունը ներկայումս px- ի փոխարեն em- ն և Rem- ն օգտագործելն է: Ընդհանուր համաձայնությունը միշտ չէ, որ ճիշտ է, բայց դա կատարելու լավ միջոց է, քանի դեռ այլ կերպ վարվելու պատճառ չունեք: