px-ээс rem & em хөрвүүлэгч
Өөрийн үндсэн болон контекст үсгийн хэмжээг ашиглан px, rem болон em хооронд хөрвүүлнэ үү — аль нэг талбарыг засахад нөгөө хоёр нь бичих явцад шууд шинэчлэгдэнэ.
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 40 | 2.5 |
| 48 | 3 |
Хөрвүүлэлт бүр таны хөтөч дээр ажиллана. Таны бичсэн юуг ч BroBroGo руу хуулж илгээхгүй.
Түгээмэл асуултууд
px, rem болон em хоорондын ялгаа юу вэ?
px нь тогтмол урт юм. rem нь хуудасны үндсэн (root) үсгийн хэмжээгээр хэмжигддэг тул 16px үндсэн хэмжээтэй үед 1rem нь 16px-тэй тэнцэнэ. em нь өөрийн байрлаж буй элементийн үсгийн хэмжээгээр хэмжигддэг. Текст болон зайг rem-ээр хэмжих нь уншигч өөрийн үндсэн үсгийн хэмжээг өөрчлөхөд бүх зүйл зэрэг өөрчлөгдөх боломжийг олгодог.
Яагаад тусдаа em контекст хэмжээ байдаг вэ?
em нь үргэлж үндсэн хэмжээ биш, харин өөрийн элементийн үсгийн хэмжээтэй харьцуулагддаг. em-ийг зөв уншихын тулд em контекстийг тухайн элементийн үсгийн хэмжээтэй ижил болгож тохируулаарай. Хоёр хэмжээ таарч байвал үндсэн хэмжээтэй ижил хэвээр үлдээнэ үү.
Хэрэв миний үндсэн үсгийн хэмжээ 16px биш бол яах вэ?
Өөрийн CSS-тэй тохируулахын тулд үндсэн үсгийн хэмжээний талбарыг өөрчлөхөд rem утга бүр шууд шинэчлэгдэнэ. Доорх хурдан хүснэгт нь ихэнх сайтуудын ашигладаг 16px үндсэн хэмжээнд зориулсан хялбар гарын авлага юм.