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

ทำไมจึงแปลง px เป็น em

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

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

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

สูตรและค่าฐาน

em เท่ากับ px หารด้วยขนาดตัวอักษร

สูตรคือการหารขั้นเดียว: em = px ÷ ค่าฐาน เมื่อค่าฐานเป็น 16 px ค่า 24 px จะเป็น 1.5 em, 8 px เป็น 0.5 em และ 20 px เป็น 1.25 em หน้านี้แสดงค่าฐานไว้ข้างผลลัพธ์ เช่น 24 px = 1.5 em (16 px) เพื่อให้คุณเห็นว่าสมมติอะไรไว้ การคำนวณเหมือนกับ rem แต่ความหมายต่างกัน

ค่าฐานคืออะไร

สำหรับ rem ค่าฐานคือขนาดตัวอักษรของ element ราก สำหรับ em คือขนาดตัวอักษรของ element ที่ใช้ค่านั้น หรือสำหรับ property font-size เอง คือของ element แม่ นั่นคือเหตุผลที่ em ไม่มีคำตอบเดียว ค่าเดียวกันในสไตล์ชีตมีขนาดพิกเซลต่างกันในที่ต่างกัน หากคุณกำลังแปลงระยะขอบในของปุ่มที่ข้อความมีขนาด 14 px ให้พิมพ์ 14 เป็นค่าฐาน หากคุณกำลังแปลงระยะห่างของหัวข้อขนาด 32 px ให้พิมพ์ 32

ค่าเริ่มต้นเมื่อคุณไม่ทราบ

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

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

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

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

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

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

การปัดเศษ

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

กับดักการซ้อน

em ทบกันอย่างไร

สมมติว่ารายการมี font-size: 0.875em และรายการย่อยของมันมี font-size: 0.875em เช่นกัน รายการมีขนาด 87.5% ของ element แม่ แต่ละรายการย่อยมีขนาด 87.5% ของรายการ ซึ่งเป็นประมาณ 76.6% ของ element แม่ รายการที่ซ้อนอยู่ในรายการย่อยจะหดลงอีก เหลือประมาณ 67% หลังสามระดับ ข้อความจะเล็กมาก และไม่มีใครตั้งใจเขียนให้เป็นเช่นนั้น นี่คือความหมายของคำว่า em ทบกัน

ทำไมจึงสำคัญเมื่อคุณแปลง px เป็น em

หากคุณแปลงค่าพิกเซลเป็น em สำหรับ font-size ค่าฐานที่คุณต้องใช้คือขนาดตัวอักษรของ element แม่ ไม่ใช่ของ element เอง ข้อผิดพลาดจำนวนมากมาจากการใช้ค่าที่ผิด สำหรับ property อื่น เช่น padding และ margin ค่าฐานคือขนาดตัวอักษรของ element เอง กฎนี้พูดง่ายและลืมง่าย: font-size มองขึ้นไปข้างบน ส่วนทุกอย่างอื่นมองที่ตัวเอง

วิธีหลีกเลี่ยงเรื่องไม่คาดฝัน

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

ขนาดที่ใช้บ่อย

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

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

เปลี่ยนค่าฐานให้ตรงกับ element

หากคุณตั้งค่าฐานเป็น 14 สำหรับปุ่มเล็ก ตารางจะเปลี่ยน: ตอนนี้ 14 px คือ 1 em, 7 px คือ 0.5 em และ 21 px คือ 1.5 em ลองดู แล้วคุณจะเห็นว่าระยะขอบใน 1.5 em มีขนาดพิกเซลต่างกันในปุ่ม 14 px กับปุ่ม 18 px และทำไมจึงมีประโยชน์

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

พิมพ์ค่าพิกเซล

ป้อนขนาดเป็นพิกเซลในช่องแรก รองรับทศนิยม

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

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

คัดลอกค่า em

ใช้ตัวเลขใน CSS ของคุณพร้อมหน่วย เช่น padding: 1.25em ตัวเลขที่ไม่มีหน่วยใช้ไม่ได้กับ property ส่วนใหญ่

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

em ในตัวพิมพ์โลหะ

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

พิกเซลและ rem

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

ที่ที่ em เป็นตัวเลือกที่เหมาะสม

ระยะขอบในของปุ่มและช่องกรอกแบบฟอร์ม

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

ระยะห่างข้างไอคอน

ไอคอนที่ตามด้วยคำบรรยายต้องมีช่องว่างที่ขยายตามคำบรรยาย margin 0.4em ทำได้ ส่วน margin 6px ทำไม่ได้

ระยะขอบรอบหัวข้อและย่อหน้า

จังหวะแนวตั้งในเอกสารรักษาได้ง่ายกว่าเมื่อระยะห่างย่อหน้าเป็น em เพราะตามขนาดของย่อหน้า ระยะขอบของหัวข้อเป็น em คงสัดส่วนเมื่อหัวข้อเปลี่ยนขนาดที่จุดเปลี่ยนต่างๆ

Media query

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

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

ใช้ค่าฐานผิด

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

ลืมว่า element แม่อาจเป็น em ด้วย

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

คาดหวังตัวเลขเดียวสำหรับทั้งส่วนประกอบ

ส่วนประกอบที่มีข้อความหลายขนาดไม่มีค่า em เดียวสำหรับส่วนต่างๆ แปลงแต่ละส่วนเทียบกับค่าฐานของตัวเอง

ผสม em และ rem ใน property เดียวกัน

padding 1rem ข้าง margin 1em ใช้ได้ตามกฎและมักทำให้สับสน เลือกกฎสักข้อ เช่น rem สำหรับขนาดตัวอักษรและ em สำหรับระยะห่าง แล้วยึดตามนั้น

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

16 px เท่ากับกี่ em

หนึ่ง หากขนาดตัวอักษรที่มีผลอยู่คือ 16 px หากขนาดตัวอักษรของ element คือ 20 px ดังนั้น 16 px คือ 0.8 em

em ดีกว่า rem หรือไม่

ไม่มีอันไหนดีกว่า rem ดีกว่าสำหรับขนาดตัวอักษรและเลย์เอาต์โดยรวม em ดีกว่าสำหรับระยะห่างที่ควรตามข้อความของตัวเอง

ทำไมระยะขอบในของฉันจึงใหญ่กว่าที่คาด

เพราะมันสัมพัทธ์กับขนาดตัวอักษรของ element ซึ่งอาจใหญ่กว่าที่คุณสมมติไว้ ตรวจดูขนาดตัวอักษรที่คำนวณแล้วในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์

ใช้ทศนิยมได้หรือไม่

ได้ ค่าอย่าง 0.625em และ 1.333em เป็นเรื่องปกติ

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

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

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

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

เลือกให้ชาญฉลาดเมื่อแปลง px เป็น em

ตัดสินใจว่าค่านั้นเป็นของอะไร

หากเป็นของข้อความ em ถูกต้อง หากเป็นของหน้า เช่น ความกว้างคอลัมน์หรือช่องว่างระหว่างส่วน rem หรือหน่วยวิวพอร์ตเหมาะกว่า px เป็น vw แสดงขนาดเป็นสัดส่วนของความกว้างหน้าจอ

เขียนเจตนาไว้ในคอมเมนต์

บรรทัดอย่าง padding: 0.75em 1.25em; /* 12px 20px at 16px */ ทำให้เหตุผลมองเห็นได้ เมื่อขนาดตัวอักษรเปลี่ยนในภายหลัง คุณจะรู้ว่าตัวเลขเหล่านั้นหมายถึงอะไร

เก็บขนาดตัวอักษรของส่วนประกอบไว้ที่เดียว

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

นิสัยที่ดีเมื่อแปลง px เป็น em

แปลง px เป็น em ทีละส่วนประกอบ

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

ใช้เครื่องคิดเลขสำหรับค่าแปลกๆ ไม่ใช่ค่ากลมๆ

ค่าอย่าง 8, 16 และ 24 พิกเซลแปลงเป็นตัวเลข em ที่เรียบร้อยที่ค่าฐาน 16 ค่าแปลกๆ เช่น 22 หรือ 13 ให้ทศนิยมยาว เมื่อคุณแปลง px เป็น em สำหรับค่าเหล่านี้ ให้ตัดสินใจว่าการออกแบบต้องการตัวเลขที่แน่นอนจริงหรือไม่ หรือค่า em กลมๆ ที่ใกล้ที่สุดจะดีพอๆ กัน นักออกแบบมักยินดีปัดเศษ และสไตล์ชีตที่เรียบร้อยดูแลรักษาง่ายกว่า

จดบันทึกค่าฐาน

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

เปรียบเทียบกับค่าเทียบเท่าใน rem

หากคุณไม่แน่ใจว่า em หรือ rem เหมาะกับค่าใด ให้แปลง px เป็น em และเป็น rem แล้วถามว่าควรเกิดอะไรขึ้นเมื่อขนาดข้อความเปลี่ยน หากค่านั้นควรตามข้อความของ element เอง ให้เลือก em หากควรตามหน้า ให้เลือก rem

ตัวแปลงที่เกี่ยวข้อง

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

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

สมมติว่าป้ายชื่อของปุ่มมีขนาด 14 px และการออกแบบให้ปุ่มมีระยะขอบในแนวตั้ง 10 px และแนวนอน 20 px คุณพิมพ์ 14 เป็นค่าฐาน พิมพ์ 10 และอ่านได้ 0.714 em พิมพ์ 20 และอ่านได้ 1.429 em ในสไตล์ชีตคุณเขียน padding: 0.714em 1.429em เมื่อใช้ปุ่มเดียวกันในส่วนหลักที่ป้ายชื่อมีขนาด 18 px ระยะขอบในจะกลายเป็น 12.9 px และ 25.7 px ตามสัดส่วน หากคุณเขียน 10px และ 20px ปุ่มจะดูบางรอบข้อความที่ใหญ่ขึ้น

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

ก่อนแปลง

ตัดสินใจว่าค่านั้นเป็นของ property ใด และหาขนาดตัวอักษรที่มันควรสัมพัทธ์ด้วย

ระหว่างแปลง

พิมพ์ค่าพิกเซลและค่าฐานที่ถูกต้อง และคัดลอกตัวเลข em พร้อมหน่วย

หลังแปลง

เปลี่ยนขนาดตัวอักษรของส่วนประกอบในเบราว์เซอร์และตรวจว่าระยะห่างตามไปด้วย มองหาค่า em ซ้อนกันที่ทบกัน

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

ใช้ขนาดรากเป็นค่าฐานสำหรับ padding

นั่นเป็นหน้าที่ของ rem em อ้างอิงถึงขนาดตัวอักษรของ element เอง

ใช้ em กับขนาดตัวอักษรทุกขนาด

ขนาดตัวอักษรแบบ em ที่ซ้อนกันจะทบกันและทำให้คุณประหลาดใจ ใช้ rem สำหรับขนาดตัวอักษร

ปัดเป็นตัวเลขที่ดูเรียบร้อยแต่ผิด

1.43 ไม่เท่ากับ 1.5 เมื่อคูณกับตัวอักษรขนาดใหญ่ เก็บตัวเลขให้พอ

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

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

สรุป

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