แปลง em เป็น px Em ↔ Pixels ฟรี ออนไลน์ ปลอดภัย

เหตุใดคุณจึงแปลง em เป็น px

สไตล์ชีตระบุ margin-bottom: 0.75em ที่หัวข้อ, padding: 0.4em 0.9em ที่ปุ่ม และ line-height ที่ 1.3em ในบล็อกข้อความ ค่าเหล่านี้ดีและยืดหยุ่น แต่แทบจะนึกภาพไม่ออก ระยะขอบนั้นกี่พิกเซล ระยะห่างภายในปุ่มตรงกับ 6 px และ 14 px ในไฟล์ดีไซน์หรือไม่ หากต้องการทราบ คุณต้องแปลง em เป็น px โดยคูณด้วยขนาดตัวอักษรที่ em อ้างอิง แล้วอ่านคำตอบในหน่วยที่เครื่องมือออกแบบใช้ นี่เป็นคำถามที่นักพัฒนาถามเมื่อตรวจสอบโค้ด เทียบงานที่สร้างกับแบบจำลอง แก้ปัญหาระยะห่าง หรือส่งมอบคอมโพเนนต์ที่เสร็จแล้วให้ผู้ที่คิดเป็นพิกเซล

em เป็นหน่วยที่แปลงยากที่สุดใน CSS เพราะไม่มีค่าคงที่ em คือขนาดตัวอักษรที่มีผลอยู่ ณ จุดที่ใช้ค่านั้น หรือสำหรับคุณสมบัติ font-size เองคือขนาดของพาเรนต์ ดังนั้น 1.5 em อาจเป็น 24 px ในที่หนึ่งและ 36 px ในอีกที่หนึ่ง ในสไตล์ชีตเดียวกัน จากกฎเดียวกัน เครื่องมือแปลงจึงไม่เดา แต่ถามขนาดตัวอักษรที่ em อ้างอิง แสดงไว้ข้างคำตอบ และคำนวณด้วยค่านั้น หากคุณไม่ทราบขนาด หัวข้อด้านล่างอธิบายวิธีหาในเบราว์เซอร์ของคุณ

การคำนวณเกิดขึ้นในเบราว์เซอร์ของคุณและไม่มีสิ่งใดถูกอัปโหลด ด้านล่างคุณจะพบสูตร วิธีหาฐานที่ถูกต้อง สิ่งที่การแปลงรักษาไว้และรักษาไว้ไม่ได้ วิธีที่ค่า em ซ้อนกันคูณกัน เมื่อใดที่นักพัฒนาต้องแปลง em เป็น px และนิสัยบางอย่างที่ทำให้สไตล์ชีตแบบ em เข้าใจง่าย

สูตรและฐาน

px เท่ากับ em คูณขนาดตัวอักษร

สูตรคือการคูณครั้งเดียว: px = em × base เมื่อฐานเป็น 16 px, 1.5 em กลายเป็น 24 px, 0.75 em กลายเป็น 12 px และ 2 em กลายเป็น 32 px หน้านี้แสดงฐานไว้ข้างผลลัพธ์ ดังนั้นบรรทัดเช่น 1.5 em = 24 px (16 px) บอกชัดเจนว่าสมมติอะไรไว้ หากขนาดตัวอักษรของอิลิเมนต์คือ 20 px ให้พิมพ์ 20 แล้ว 1.5 em จะกลายเป็น 30 px

การหาฐานในเบราว์เซอร์ของคุณ

เปิดเครื่องมือนักพัฒนา เลือกอิลิเมนต์ แล้วดูขนาดตัวอักษรที่คำนวณได้ นั่นคือตัวเลขที่ต้องพิมพ์ในช่องฐานสำหรับคุณสมบัติใดก็ตามที่ไม่ใช่ font-size สำหรับ font-size เอง ให้เลือกพาเรนต์แล้วอ่านขนาดที่คำนวณได้ของพาเรนต์แทน ใช้เวลาเพียงไม่กี่วินาทีและตัดการคาดเดาออกไปทั้งหมด

เมื่อคุณมองไม่เห็นหน้า

หากคุณกำลังอ่านโค้ดโดยไม่มีหน้า ให้ไล่ตามห่วงโซ่ของขนาดตัวอักษรขึ้นไปจากอิลิเมนต์ คือ font-size ของตัวเองหากมี มิฉะนั้นของพาเรนต์ และต่อไปจนถึงราก ซึ่งเป็น 16 px เว้นแต่สไตล์ชีตหรือผู้อ่านจะเปลี่ยน เมื่อขนาดใดกำหนดเป็น em ให้คูณไปตามห่วงโซ่ งานนี้น่าเบื่อ จึงเป็นเหตุที่ทีมส่วนใหญ่เลือกใช้ rem กับขนาดตัวอักษร

สิ่งที่การแปลงรักษาไว้และสิ่งที่ทำไม่ได้

รักษาสัดส่วนกับข้อความ

ผลลัพธ์คือขนาดพิกเซลที่ em แทนที่ฐานที่คุณพิมพ์ เมื่อเขียนเป็น em ช่องว่างหรือขนาดจะตามข้อความที่มันเป็นส่วนหนึ่ง และการแปลงแสดงว่าสำหรับข้อความขนาดหนึ่ง ๆ ค่านั้นเป็นเท่าใด

ให้คำตอบเดียวสำหรับทั้งหน้าไม่ได้

นี่คือข้อที่ต้องระวัง: em สัมพันธ์กับขนาดตัวอักษรของอิลิเมนต์เอง หรือสำหรับ font-size คือของพาเรนต์ ไม่ใช่ของราก ดังนั้น 1.5 em เดียวกันจึงเป็น 24 px ภายในอิลิเมนต์ 16 px และ 36 px ภายในอิลิเมนต์ 24 px และ em ซ้อน em จะคูณกัน ตัวเลขบนหน้าถูกต้องสำหรับฐานในช่องเท่านั้น ไม่ใช่สิ่งอื่น หากคุณต้องการตัวเลขเดียวที่ใช้ได้ทุกที่ นั่นคือหน้าที่ของ rem หากต้องการเปรียบเทียบทั้งสอง ให้ แปลง rem เป็น px แล้วดูว่าหน่วยที่สัมพันธ์กับรากคงที่อย่างไร

การปัดเศษ

การคูณด้วยฐานที่เป็นจำนวนเต็มให้ผลลัพธ์แม่นยำสำหรับค่าส่วนใหญ่ หากฐานเป็นทศนิยม เช่น 13.5 px ค่าเช่น 1.2 em จะให้ 16.2 px เบราว์เซอร์จัดการพิกเซลเศษส่วนได้ แต่เมื่อคุณต้องการพิกเซลเต็ม เช่น สำหรับเส้นขอบบางเฉียบหรือไอคอนบนกริด ให้ปัดเศษอย่างตั้งใจและตรวจดูว่าหน้าตาเป็นอย่างไร

วิธีที่ค่า em ซ้อนกันคูณกัน

รายการในรายการ

สมมติหน้าที่ข้อความเนื้อหาเป็น 16 px รายการมี font-size: 0.875em ซึ่งคือ 14 px รายการย่อยภายในก็มี font-size: 0.875em เช่นกัน ซึ่งคือ 14 × 0.875 = 12.25 px รายการในรายการย่อยก็ทำซ้ำอีก: 10.7 px ลึกลงไปสามระดับข้อความก็เล็กจิ๋ว และไม่มีใครตัดสินใจให้เป็นเช่นนั้น เมื่อคุณแปลง em เป็น px สำหรับคอมโพเนนต์แล้วคำตอบดูเล็กเกินไป การซ้อนกันคือสิ่งแรกที่ควรตรวจสอบ

เดินขึ้นตามห่วงโซ่

เพื่อทราบขนาดพิกเซลจริงของ em ที่ซ้อนกัน ให้คูณฐานด้วยแต่ละค่าระหว่างทางลงมา: 16 × 0.875 × 0.875 = 12.25 เครื่องมือแปลงทำทีละขั้น สำหรับห่วงโซ่ ให้แปลงค่าแรก ใช้คำตอบเป็นฐานของค่าที่สอง และทำต่อไป นี่คือเลขคณิตเดียวกับที่เบราว์เซอร์ทำ

วิธีหยุดไม่ให้ทบกัน

ใช้ rem กับขนาดตัวอักษร เพื่อให้ทุกขนาดอ้างอิงรากและเก็บ em ไว้สำหรับระยะห่าง เพื่อให้ padding และ margin ตามข้อความของอิลิเมนต์ตนเอง ในการผสมนั้นไม่มีสิ่งใดทบกัน และค่า em ที่คุณแปลงจะสัมพันธ์กับขนาดตัวอักษรที่คุณอ่านได้ทันทีเสมอ

ค่าที่พบบ่อย

ตารางท้ายหน้า

หน้านี้มีตารางค่าพิกเซลที่ตัวเลข em ทั่วไปสอดคล้องที่ฐานที่คุณตั้ง: 0.5 em คือ 8 px, 0.625 คือ 10, 0.75 คือ 12, 0.875 คือ 14, 1 คือ 16, 1.125 คือ 18, 1.25 คือ 20, 1.5 คือ 24, 2 คือ 32, 3 คือ 48 และ 4 คือ 64 ที่ฐานเริ่มต้น ตัวเลขเหล่านี้เหมือนกับของ rem เปลี่ยนฐานแล้วตารางจะเปลี่ยนตาม ซึ่งเป็นวิธีที่ดีในการดูว่า em ทำอะไรจริง ๆ

ลองสองฐานเคียงข้างกัน

พิมพ์ 1.5 ด้วยฐาน 14 แล้วด้วยฐาน 20 คุณจะได้ 21 และ 30 พิกเซล นั่นคือความต่างทั้งหมดระหว่าง em กับ rem ในการทดลองเดียว: ตัวเลขเดียวกัน สองอิลิเมนต์ สองขนาด

วิธีแปลง em เป็น px ที่นี่

พิมพ์ค่า em

ป้อนขนาดเป็น em ในช่องแรก รับทศนิยมได้ ดังนั้น 0.714 ใช้ได้เช่นเดียวกับ 1

ตั้งขนาดตัวอักษรที่ em อ้างอิง

พิมพ์ขนาดตัวอักษรของอิลิเมนต์ หรือของพาเรนต์หากคุณสมบัติคือ font-size หากไม่แน่ใจ ให้ปล่อย 16 ไว้และถือว่าผลลัพธ์เป็นค่าประมาณ

อ่านค่าพิกเซล

คำตอบปรากฏทันที พร้อมฐานที่แสดงไว้ข้างกัน คัดลอกไปไว้ในบันทึกของคุณหรือเทียบกับไฟล์ดีไซน์

หน่วยเหล่านี้มาจากไหน

em

em เก่าแก่กว่าเว็บ ในตัวพิมพ์โลหะ มันคือความกว้างของบล็อกที่หล่อขึ้น ตั้งชื่อตามตัว M พิมพ์ใหญ่ และช่างพิมพ์ยังคงพูดถึงเส้น em dash และช่องว่าง em ใน CSS มันหมายถึงขนาดตัวอักษรที่มีผลอยู่ จึงเปลี่ยนไปเมื่อคุณซ้อนอิลิเมนต์

พิกเซลและ rem

เมื่อจอแสดงผลไม่มีความหนาแน่นที่คาดเดาได้อีกต่อไป หน้าที่วัดด้วยพิกเซลจริงก็กลายเป็นหน้าที่หดลงเมื่อหน้าจอคมชัดขึ้น พิกเซล CSS จึงถูกนิยามใหม่เป็นความยาวอ้างอิง: ประมาณ 1/96 นิ้วเมื่อมองจากระยะอ่านที่สบาย rem ถูกเพิ่มเข้ามาเพื่อหนีการทบกันของ em: มันคือ em ของอิลิเมนต์ราก และไม่เคยคูณกัน หากคุณทำงานกับทั้งสอง ให้ แปลง px เป็น em เพื่อไปในทิศทางตรงกันข้าม

เมื่อนักพัฒนาแปลง em เป็น px

ตรวจงานที่สร้างกับไฟล์ดีไซน์

นักออกแบบส่งไฟล์เป็นพิกเซล และโค้ดเป็น em เพื่อตรวจสอบว่าหน้าตรงกัน คุณแปลง em เป็น px โดยใช้ขนาดตัวอักษรของแต่ละคอมโพเนนต์ ปุ่มที่มีป้ายกำกับ 14 px และ padding เป็น 0.714em 1.429em ควรออกมาเป็น 10 px และ 20 px และหากดีไซน์ระบุ 12 และ 24 แสดงว่ามีสิ่งหนึ่งผิด

การแก้ปัญหาระยะห่าง

เมื่อช่องว่างดูใหญ่หรือเล็กเกินไป สาเหตุมักเป็นค่า em ที่อ้างอิงตัวอักษรที่ใหญ่หรือเล็กกว่าที่คุณคาดไว้ การแปลงด้วยขนาดตัวอักษรที่คำนวณได้ของอิลิเมนต์บอกคุณทันทีว่าปัญหาอยู่ที่เลขคณิตหรือไม่

การอ่านโค้ดที่ไม่คุ้นเคย

สไตล์ชีตที่รับช่วงมาเต็มไปด้วยค่า em ที่คุณต้องสร้างขนาดพิกเซลขึ้นใหม่ การแปลงค่าหลักสองสามค่าด้วยฐานที่ถูกต้องให้แผนที่ของดีไซน์แก่คุณ

การเขียนเอกสารและการทดสอบ

ผู้ทดสอบหน้าอธิบายสิ่งที่เห็นเป็นพิกเซล นักพัฒนาที่บอกว่า padding คือ 0.9em ไม่ได้สื่ออะไรมากกับผู้ทดสอบ แต่ 12.6 px มีความหมาย การแปลงทำให้สองฝ่ายเข้าใจกัน

กับดักเมื่อคุณแปลง em เป็น px

ใช้ฐานผิด

ข้อผิดพลาดที่พบบ่อยที่สุด สำหรับ font-size ใช้ขนาดของพาเรนต์ สำหรับคุณสมบัติอื่นทั้งหมดใช้ขนาดของอิลิเมนต์เอง ตรวจสอบคุณสมบัติก่อนพิมพ์ฐาน

ลืมพาเรนต์ที่เป็น em

หากขนาดของพาเรนต์เองเป็น em คุณต้องไล่ตามห่วงโซ่ ใช้ค่าที่คำนวณได้จากเครื่องมือนักพัฒนาเพื่อลัดขั้นตอน

สมมติว่าหน้าจอแสดงพิกเซลเท่ากัน

พิกเซล CSS ไม่ใช่พิกเซลของอุปกรณ์ บนจอความหนาแน่นสูง หนึ่งพิกเซล CSS อาจเป็นสองหรือสามพิกเซลของอุปกรณ์ การแปลงให้พิกเซล CSS ซึ่งเป็นหน่วยที่เครื่องมือออกแบบและสไตล์ชีตใช้ร่วมกัน

ถือคำตอบเป็นคำสัญญา

หากผู้อ่านขยายข้อความ หรือคอมโพเนนต์ถูกนำกลับมาใช้กับขนาดตัวอักษรอื่น พิกเซลก็เปลี่ยน ตามที่ควรเป็น ตัวเลขที่แปลงแล้วอธิบายสถานการณ์หนึ่ง ไม่ใช่ทั้งหมด

คำถามที่ผู้คนถามก่อนแปลง

1 em กี่พิกเซล

เท่ากับขนาดตัวอักษรที่มีผลอยู่: 16 px สำหรับข้อความเนื้อหาทั่วไปที่ค่าเริ่มต้น 24 px ภายในอิลิเมนต์ 24 px

2 em กี่พิกเซล

สองเท่าของขนาดตัวอักษรที่มีผลอยู่ ที่ 16 px นั่นคือ 32 px

เหตุใดเบราว์เซอร์ของฉันจึงแสดงสิ่งที่ต่างออกไป

ขนาดตัวอักษรจริงของอิลิเมนต์ต่างจากฐานที่คุณพิมพ์ ให้อ่านขนาดตัวอักษรที่คำนวณได้ในเครื่องมือนักพัฒนา

em เหมือนกับ rem หรือไม่

ไม่ em สัมพันธ์กับอิลิเมนต์ ส่วน rem สัมพันธ์กับราก

ตัวเลขของฉันถูกอัปโหลดหรือไม่

ไม่ เลขคณิตทำงานในเบราว์เซอร์ของคุณและไม่มีสิ่งใดถูกส่งไปที่ใด

ฉันจะย้อนกลับได้อย่างไร

ด้วย px เป็น em ซึ่งหารแทนที่จะคูณ

นิสัยที่ทำให้สไตล์ชีต em เข้าใจง่าย

ใส่คอมเมนต์ระบุฐาน

บรรทัดเช่น padding: 0.75em 1.25em; /* 12px 20px at 16px */ ใช้ตัวอักษรเพียงไม่กี่ตัวและช่วยให้ผู้อ่านคนถัดไปไม่ต้องแปลง มันบันทึกฐานที่คุณสมมติไว้

ตั้งขนาดตัวอักษรครั้งเดียวต่อคอมโพเนนต์

กำหนดขนาดตัวอักษรของคอมโพเนนต์ที่อิลิเมนต์รากของมัน แล้วอ้างอิงด้วย em ภายใน ฐานจึงเหมือนกันสำหรับทุกค่าในคอมโพเนนต์ และคุณแปลง em เป็น px เทียบกับฐานนั้นได้อย่างมั่นใจ

เก็บ em ไว้สำหรับระยะห่าง rem สำหรับตัวอักษร

เป็นการแบ่งที่สไตล์ชีตส่วนใหญ่ลงตัว และทำให้เลขคณิตเรียบง่าย สำหรับขนาดที่สัมพันธ์กับหน้าจอ px เป็น vw และ vw เป็น px เป็นเครื่องมือที่ใช้

ทดสอบที่ขนาดข้อความอื่น

เพิ่มขนาดข้อความเริ่มต้นในเบราว์เซอร์ของคุณแล้วดูหน้า หากระยะห่างตามข้อความ แสดงว่าค่า em ทำงาน หากไม่ แสดงว่ามีบางอย่างถูกทิ้งไว้เป็นพิกเซล

วิธีการสำหรับกรณียุ่งยาก

ทำงานจากด้านนอกเข้าด้านใน

เมื่อคอมโพเนนต์อยู่ลึกภายในอื่น ๆ และค่า em ของมันดูสับสน ให้เริ่มที่อิลิเมนต์นอกสุดที่คุณรู้ขนาด แล้วทำงานเข้าด้านใน แปลงทีละระดับ จดขนาดพิกเซลแต่ละค่าลงในบันทึกขณะทำ หลังจากสองหรือสามระดับ ห่วงโซ่ทั้งหมดอยู่บนกระดาษ และคุณเห็นได้ชัดว่าตัวเลขที่น่าประหลาดใจมาจากไหน ใช้เวลาหนึ่งนาทีและแทนที่การเดาหนึ่งชั่วโมง

ตัดสินใจว่าจะทำให้เรียบง่ายขึ้นหรือไม่

หากคุณต้องแปลง em เป็น px ผ่านสี่ระดับเพื่อเข้าใจเลย์เอาต์ สไตล์ชีตกำลังบอกอะไรบางอย่างแก่คุณ ลองย้ายขนาดตัวอักษรไปเป็น rem เพื่อให้แต่ละขนาดอ้างอิงราก และเหลือเฉพาะระยะห่างไว้เป็น em หน้าจะดูเหมือนเดิมและอ่านง่ายขึ้นมากในปีหน้า

เครื่องมือแปลงที่เกี่ยวข้อง

เครื่องมือกลุ่มเดียวกันครอบคลุมการแปลงข้างเคียง หากต้องการกลับไปที่ em ใช้ px เป็น em สำหรับขนาดที่สัมพันธ์กับราก มี px เป็น rem และ rem เป็น px และสำหรับขนาดที่สัมพันธ์กับหน้าจอ มี px เป็น vw และ vw เป็น px สำหรับสีของสไตล์ชีตเดียวกัน HEX เป็น RGB และ RGB เป็น HEX จัดการรูปแบบการเขียน

ตัวอย่างการทำงาน

สมมติว่าคุณกำลังตรวจคอมโพเนนต์ปุ่ม ป้ายกำกับคือ 14 px, CSS ระบุ padding: 0.714em 1.429em และช่องว่าง 0.5em ระหว่างไอคอนกับป้ายกำกับ คุณพิมพ์ 14 เป็นฐาน แล้ว 0.714 และอ่านได้ 10 px, 1.429 และอ่านได้ 20 px, 0.5 และอ่านได้ 7 px ไฟล์ดีไซน์ระบุ 10, 20 และ 8 ตรงกันสองในสาม คุณจึงดูที่ช่องว่าง: 8 px ที่ฐาน 14 จะเป็น 0.571 em และมีคนปัดเป็น 0.5 คุณยกเรื่องนี้ขึ้นในการตรวจทาน และการแก้ไขคือตัวเลขเดียว

รายการตรวจสอบสั้น ๆ

ก่อนแปลง

หาขนาดตัวอักษรที่ em อ้างอิง จากเครื่องมือนักพัฒนาหรือจากห่วงโซ่ขนาดตัวอักษรในโค้ด

ขณะแปลง

พิมพ์ค่า em ตั้งฐานและอ่านพิกเซล โดยสังเกตฐานที่แสดงไว้ข้างผลลัพธ์

หลังแปลง

เทียบกับไฟล์ดีไซน์ หากตัวเลขต่างกัน ให้ตรวจสอบฐานก่อนจะสงสัยโค้ด

ข้อผิดพลาดที่พบบ่อย

ใช้ 16 โดยไม่ตรวจสอบ

ถูกต้องเฉพาะเมื่อขนาดตัวอักษรของอิลิเมนต์คือ 16 px

สับสน em กับ rem

หน้าตาคล้ายกันแต่ทำงานต่างกัน ใช้หน้าที่ถูกต้องสำหรับแต่ละหน่วย

ลืมว่า em ทบกัน

ค่าภายในอิลิเมนต์ที่ซ้อนกันสัมพันธ์กับขนาดที่คุณอาจไม่เคยเห็น ให้ไล่ตามห่วงโซ่

ตัวเลขของคุณอยู่บนอุปกรณ์ของคุณ

การคำนวณเกิดขึ้นในเครื่อง ค่าของคุณถูกใช้โดยเบราว์เซอร์ของคุณเองและไม่มีสิ่งใดถูกส่งไปที่ใด ไม่มีอะไรต้องลบหลังจากนั้นและไม่ต้องสร้างบัญชี นั่นคือวิธีง่าย ๆ ในการแปลง em เป็น px

สรุป

หากต้องการแปลง em เป็น px ที่นี่ ให้พิมพ์ขนาดเป็น em และขนาดตัวอักษรที่มันอ้างอิง แล้วอ่านผลเป็นพิกเซลทันที โดยใช้สูตร px = em × base การแปลงรักษาสัดส่วนที่สัมพันธ์กับขนาดตัวอักษรที่มีผลอยู่ ณ จุดที่ใช้ค่านั้น แต่ให้คำตอบเดียวสำหรับทั้งหน้าไม่ได้: em สัมพันธ์กับอิลิเมนต์เอง หรือกับพาเรนต์สำหรับ font-size ดังนั้น 1.5 em เดียวกันจึงเป็น 24 px ภายในอิลิเมนต์ 16 px และ 36 px ภายในอิลิเมนต์ 24 px และ em ซ้อน em จะคูณกัน สำหรับตัวเลขเดียวที่ใช้ได้ทุกที่ ให้ใช้ rem ไม่มีสิ่งใดถูกอัปโหลด