Энэ хэрэгсэл юу хийдэг вэ
px-ээс rem & em хөрвүүлэгч нь пиксел (px) утгыг root em (rem) болон em утга руу, мөн эсрэг чиглэлд хөрвүүлдэг. Гурван нэгжийн — px, rem, em — аль нэгэнд утга оруулахад хэрэгсэл үлдсэн хоёрыг автоматаар тооцоолж, дэлгэцэнд шууд харуулна. Мөн та өөрийн загварт тохирсон хөрвүүлэлт гаргахын тулд үндсэн (root) үсгийн хэмжээ болон em контекст үсгийн хэмжээг өөрөө тохируулах боломжтой.
Оролтын талбарууд
Хэрэгсэл дараах гурван талбарыг авдаг.
- Үндсэн үсгийн хэмжээ (px): хуудасны суурь үсгийн хэмжээг пикселээр илэрхийлсэн тоо.
- em контекст үсгийн хэмжээ (px): em хөрвүүлэлтэд ашиглах элементийн үсгийн хэмжээг пикселээр илэрхийлсэн тоо.
- Утгууд: px, rem эсвэл em-ээр илэрхийлсэн уртын утга.
Хуудсан дээрх зааварчилгаа нь: "px, rem эсвэл em утгыг оруулна уу — бичих явцад нөгөө хоёр нь шууд шинэчлэгдэнэ."
Хэрхэн ажилладаг вэ: гурван талбар нэг дор
px, rem, em гурван талбарын аль нэгийг засахад бусад хоёр нь бичих явцад шууд шинэчлэгддэг. Ачаалагдах үедээ үндсэн үсгийн хэмжээ болон em контекст үсгийн хэмжээ хоёулаа 16px байдаг тул анх 16px нь 1rem, мөн 1em-тэй тэнцүү байна.
Жишээлбэл, Үндсэн үсгийн хэмжээг 16px хэвээр үлдээгээд Утгууд талбарт 32 гэж бичвэл, гарах rem утга нь 2rem болно (32 нь 16-ийн 2 дахин их тул). Хэрэв та Үндсэн үсгийн хэмжээг 20px болгож өөрчилвөл, ижил 32px-ийн rem утга нь 1.6rem болж өөрчлөгдөнө (32 нь 20-ийн 1.6 дахин их тул). em талбарын хувьд ч мөн адил: em контекст үсгийн хэмжээг 24px болгож тохируулаад Утгууд талбарт 36 гэж бичвэл, гарах em утга нь 1.5em болно (36 нь 24-ийн 1.5 дахин их тул).
Хэрэгсэл сөрөг пиксел утгыг зөвшөөрдөг тул сөрөг px утгыг ч мөн адил хөрвүүлж болно. Жишээлбэл, Үндсэн үсгийн хэмжээ 16px хэвээр байхад Утгууд талбарт -8 гэж бичвэл, гарах rem утга нь -0.5rem болно (-8 нь 16-ийн -0.5 дахин их тул).
Гаралт ба нийтлэг хүснэгт
Хөрвүүлэлт хийгдмэгц хэрэгсэл дараах зүйлсийг харуулна.
- Таны тохируулсан Үндсэн үсгийн хэмжээ — та өөрчилсөн тохиргоог хадгалж, дэлгэц дээр харуулна.
- Таны тохируулсан em контекст үсгийн хэмжээ — мөн адил таны сонгосон тохиргоог хадгалж харуулна.
- Гурван нэгжид харгалзах хөрвүүлэгдсэн утгууд — px, rem, em тус бүрийн хамгийн сүүлийн тооцоолсон дүн.
- "Нийтлэг px → rem (16px суурьтай)" гэсэн хүснэгт, энэ нь 16px үндсэн хэмжээ дээр үндэслэн түгээмэл хэрэглэдэг пиксел утгуудыг rem рүү хөрвүүлж харуулдаг.
Хөрвүүлэлт амжилттай хийгдэхэд хуудас "Гурван нэгжийн хооронд хөрвүүлэгдлээ." гэж мэдэгдэнэ.
Талбар бүрийн дүрэм ба алдааны мэдэгдэл
Үндсэн үсгийн хэмжээ болон em контекст үсгийн хэмжээ хоёулаа анхдагчаар 16px байдаг. Эдгээр талбар тус бүр 0-ээс их тоо байх шаардлагатай.
- Хэрэв Утгууд талбарт хүчингүй утга оруулбал: "Хөрвүүлэх тоог оруулна уу." гэсэн алдааны мэдэгдэл гарна.
- Хэрэв Үндсэн үсгийн хэмжээ талбарт хүчингүй утга оруулбал: "Үндсэн үсгийн хэмжээ нь 0-ээс их тоо байх ёстой." гэсэн алдааны мэдэгдэл гарна.
- Хэрэв em контекст үсгийн хэмжээ талбарт хүчингүй утга оруулбал: "em контекст үсгийн хэмжээ нь 0-ээс их тоо байх ёстой." гэсэн алдааны мэдэгдэл гарна.
Хэнд хэрэгтэй вэ
Энэ хэрэгсэл дараах хэрэглэгчдэд тохиромжтой.
- Тогтмол пиксел утгыг харьцангуй rem эсвэл em нэгж рүү хөрвүүлж, дизайнаа уян хатан (responsive) болгох шаардлагатай хүн.
- Өөр өөр үндсэн үсгийн хэмжээ rem утганд яг хэрхэн нөлөөлдгийг өөрийн тоогоор шалгаж ойлгохыг хүсдэг хүн.
- Тодорхой нэг элементийн үсгийн хэмжээнд суурилан яг тухайн элементэд зориулсан em утга тооцоолох шаардлагатай хүн.
- Уншигч өөрийн хөтчийн үндсэн үсгийн хэмжээгээ өөрчлөхөд хуудасны хэмжээ зөв дагаж, харьцаагаа хэвээр хадгалж өөрчлөгдөхийг хүсдэг хүн.
Нууцлал
Хөрвүүлэлт бүр таны хөтөч дээр ажиллана. Таны бичсэн юуг ч BroBroGo руу хуулж илгээхгүй.
Түгээмэл асуултууд
px, rem болон em хоорондын ялгаа юу вэ?
px нь тогтмол урт юм. rem нь хуудасны үндсэн (root) үсгийн хэмжээгээр хэмжигддэг тул 16px үндсэн хэмжээтэй үед 1rem нь 16px-тэй тэнцэнэ. em нь өөрийн байрлаж буй элементийн үсгийн хэмжээгээр хэмжигддэг. Текст болон зайг rem-ээр хэмжих нь уншигч өөрийн үндсэн үсгийн хэмжээг өөрчлөхөд бүх зүйл зэрэг өөрчлөгдөх боломжийг олгодог.
Яагаад тусдаа em контекст хэмжээ байдаг вэ?
em нь үргэлж үндсэн хэмжээ биш, харин өөрийн элементийн үсгийн хэмжээтэй харьцуулагддаг. em-ийг зөв уншихын тулд em контекстийг тухайн элементийн үсгийн хэмжээтэй ижил болгож тохируулаарай. Хоёр хэмжээ таарч байвал үндсэн хэмжээтэй ижил хэвээр үлдээнэ үү.
Хэрэв миний үндсэн үсгийн хэмжээ 16px биш бол яах вэ?
Өөрийн CSS-тэй тохируулахын тулд үндсэн үсгийн хэмжээний талбарыг өөрчлөхөд rem утга бүр шууд шинэчлэгдэнэ. Доорх хурдан хүснэгт нь ихэнх сайтуудын ашигладаг 16px үндсэн хэмжээнд зориулсан хялбар гарын авлага юм.