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

ทำไมคุณจึงต้องแปลง rem เป็น px

คุณเปิดสไตล์ชีตและเห็น padding: 2.25rem บนการ์ดและ font-size: 0.8125rem บนคำบรรยายภาพ ค่าเหล่านี้ดีและเขียนตามแบบที่ CSS สมัยใหม่ควรเขียน แต่เมื่อมองผ่าน ๆ ก็บอกอะไรคุณไม่ได้ ระยะห่างภายในของการ์ดนั้นใหญ่เท่าใดบนหน้าจอ คำบรรยายจะอ่านออกหรือไม่ และตรงกับ 36 px และ 13 px ในไฟล์ออกแบบที่คุณได้รับมาหรือไม่ เพื่อตอบ คุณแปลง rem เป็น px คือคูณด้วยขนาดตัวอักษรของราก แล้วอ่านคำตอบเป็นหน่วยที่เครื่องมือออกแบบใช้ นี่คือทิศทางตรงข้ามกับที่ทำกันทั่วไป และเป็นสิ่งที่คุณทำเมื่ออ่านโค้ด ตรวจแบบจำลองเทียบกับงานที่สร้างจริง หรืออธิบายเลย์เอาต์ให้คนที่คิดเป็นพิกเซล

การแปลงนั้นง่าย สิ่งที่ทำให้คุ้มค่ากับหน้านี้คือค่าฐาน rem ไม่ใช่ขนาด แต่เป็นตัวคูณของขนาด คือขนาดตัวอักษรขององค์ประกอบราก ในเบราว์เซอร์ที่ไม่มีใครตั้งค่าไว้เป็นอย่างอื่น ขนาดนั้นคือ 16 px ดังนั้น 1 rem คือ 16 px, 2.25 rem คือ 36 px และ 0.8125 rem คือ 13 px แต่รากถูกเปลี่ยนได้โดยสไตล์ชีต และผู้อ่านก็เปลี่ยนได้ในเบราว์เซอร์ และเมื่อนั้นทุกค่า rem ในหน้าก็เคลื่อนตามไปด้วย หน้านี้จึงถามค่าฐานและใช้มัน แทนที่จะซ่อนไว้

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

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

px เท่ากับ rem คูณด้วยค่าฐาน

สูตรคือการคูณหนึ่งครั้ง: px = rem × base ด้วยค่าฐานตามปกติที่ 16 px, 1.5 rem กลายเป็น 24 px, 0.75 rem กลายเป็น 12 px และ 4 rem กลายเป็น 64 px หน้านี้แสดงค่าฐานไว้ข้างผลลัพธ์ ดังนั้นบรรทัดเช่น 1.5 rem = 24 px (16 px) บอกสิ่งที่ถูกสมมติไว้ และคุณเห็นทันทีว่าตรงกับโปรเจกต์ของคุณหรือไม่

การหาค่าฐานของคุณ

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

เมื่อขนาดรากยืดหยุ่น

บางเว็บไซต์ทำให้ขนาดรากเติบโตตามหน้าต่างโดยใช้นิพจน์ clamp เมื่อนั้น 1 rem ไม่มีค่าพิกเซลเดียวเลย คือ 15 px บนโทรศัพท์และ 18 px บนจอภาพกว้าง ในกรณีนั้นการแปลงใด ๆ เป็นเพียงภาพนิ่ง พิมพ์ค่าฐานที่คุณเห็นที่ความกว้างที่คุณสนใจ และเข้าใจว่าคำตอบใช้ได้เฉพาะที่ความกว้างนั้น

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

คงสัดส่วนไว้

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

ไม่อาจรู้การตั้งค่าของผู้อ่านของคุณ

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

การปัดเศษ

เนื่องจากค่าฐานมักเป็นจำนวนเต็ม ผลลัพธ์ของการคูณจึงมักแม่นยำ 0.8125 rem คือ 13 px พอดีที่ค่าฐาน 16 และ 0.6875 rem คือ 11 px พอดี หากคุณได้ทศนิยมยาว นั่นเป็นสัญญาณว่าค่า rem ถูกคำนวณจากค่าฐานที่ต่างจากที่คุณพิมพ์

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

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

หน้านี้มีตารางค่าพิกเซลที่ตัวเลข rem ทั่วไปสอดคล้องที่ค่าฐานที่คุณตั้ง: 0.5 rem คือ 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 ค่าเหล่านี้คือค่าที่ปรากฏบ่อยที่สุดในระยะห่างและสเกลตัวอักษร และการรู้ขึ้นใจทำให้อ่านสไตล์ชีตได้ในพริบตา

การอ่านสไตล์ชีตเป็นพิกเซล

แบบฝึกหัดที่มีประโยชน์คือหยิบสไตล์ชีตที่คุณไม่ได้เขียน แล้วแปลงค่าหลักเป็นพิกเซลหนึ่งครั้ง จดผลลัพธ์ในบันทึก ขนาดเนื้อความ 1 rem หัวข้อ 1.5 และ 2.25 rem ช่องว่างของคอนเทนเนอร์ 2 rem: เป็นพิกเซลคือ 16, 24, 36 และ 32 เมื่อมองแบบนี้ ตรรกะของงานออกแบบก็ปรากฏ และคุณเทียบกับไฟล์ออกแบบได้โดยไม่ต้องใช้เครื่องคิดเลข

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

พิมพ์ค่า rem

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

ตั้งค่าฐาน

ปล่อยไว้ที่ 16 หาก CSS ของคุณไม่เปลี่ยนขนาดราก เปลี่ยนหากมีการเปลี่ยน ผลลัพธ์อัปเดตขณะที่คุณพิมพ์

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

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

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

พิกเซล CSS

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

rem

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

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

การตรวจงานที่สร้างจริงเทียบกับไฟล์ออกแบบ

นักออกแบบส่งไฟล์เป็นพิกเซล นักพัฒนาเขียนโค้ดเป็น rem เพื่อตรวจว่าหน้าตรงกัน พวกเขาแปลง rem เป็น px และเปรียบเทียบตัวเลข ความไม่ตรงกันปรากฏทันที: 1.375 rem คือ 22 px และหากแบบบอก 24 ก็มีข้อใดข้อหนึ่งผิด

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

เมื่อคุณรับช่วงสไตล์ชีต ค่า rem ซ่อนขนาดจริง การแปลงค่าหลักสองสามค่าให้แผนที่ของงานออกแบบแก่คุณ: ตัวอักษรใหญ่เท่าใด ช่องไฟกว้างเท่าใด จุดเปลี่ยนเบรกพอยต์อยู่ตรงไหน

การเขียนรายงานข้อบกพร่องและเอกสาร

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

การตั้งค่าที่ต้องแม่นยำเป็นพิกเซล

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

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

ลืมขนาดรากที่ถูกเปลี่ยน

หากรากถูกตั้งเป็น 62.5% หรือเป็นนิพจน์ clamp ตัวคูณมาตรฐาน 16 จะใช้ไม่ได้ ผลลัพธ์ผิดตามอัตราส่วนของสองค่าฐาน ตรวจค่าฐานก่อนเสมอ

สับสน rem กับ em

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

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

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

ปัดเศษเร็วเกินไป

หากคุณปัด 13.333 px เป็น 13 แล้วแปลงกลับ คุณจะได้ 0.8125 rem ไม่ใช่ 0.8333 ที่คุณเริ่มต้น เก็บค่า rem เดิมไว้เมื่อมันสำคัญ

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

1 rem กี่พิกเซล

สิบหก ในเบราว์เซอร์ที่ค่าเริ่มต้นไม่ถูกเปลี่ยน

2 rem กี่พิกเซล

สามสิบสองที่ค่าฐานเริ่มต้น ที่ค่าฐาน 10 จะเป็น 20

ทำไมเบราว์เซอร์ของฉันจึงแสดงต่างออกไป

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

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

ไม่ rem อ้างอิงองค์ประกอบราก และ em อ้างอิงองค์ประกอบเอง

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

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

ฉันจะแปลงกลับอย่างไร

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

นิสัยที่ทำให้สไตล์ชีต rem อ่านง่าย

เขียนค่าพิกเซลในคอมเมนต์

บรรทัดเช่น gap: 1.5rem; /* 24px */ ใช้ตัวอักษรไม่กี่ตัวและช่วยผู้อ่านคนถัดไปไม่ต้องแปลง และยังบันทึกค่าฐานที่คุณสมมติไว้

ใช้สเกลเล็ก ๆ

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

ตั้งชื่อค่าของคุณ

ด้วย custom properties เช่น --space-md: 1.5rem สไตล์ชีตอธิบายเจตนาแทนตัวเลข ชื่อมีความหมาย และตัวเลขอยู่ในที่เดียว

ทดสอบด้วยขนาดเริ่มต้นที่ต่างออกไป

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

การใช้ค่าพิกเซลให้ดีหลังแปลง rem เป็น px

เปรียบเทียบอัตราส่วน ไม่ใช่แค่ตัวเลข

เมื่อคุณแปลง rem เป็น px สำหรับสไตล์ชีตทั้งหมด ให้ดูอัตราส่วนระหว่างขนาดเช่นเดียวกับตัวขนาดเอง สเกลตัวอักษรที่แต่ละขั้นเป็นราว 1.25 เท่าของขั้นก่อนหน้าให้ 16, 20, 25, 31 และ 39 พิกเซล สเกล 1.5 ให้ 16, 24, 36 และ 54 การสังเกตอัตราส่วนบอกว่านักออกแบบตั้งใจอะไร และให้คุณขยายสเกลอย่างสอดคล้องเมื่อต้องการขนาดใหม่

แปลสำหรับคนที่คิดเป็นพิกเซล

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

ตรวจเป้าหมายการสัมผัสและขนาดขั้นต่ำ

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

ระวังกรณีที่ซูมเข้า

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

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

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

ตัวอย่างที่คำนวณให้ดู

สมมติว่าคุณกำลังตรวจ pull request และสไตล์ชีตมีส่วนฮีโร่ที่มี padding: 5rem 1.5rem ชื่อเรื่อง 3.5rem และย่อหน้านำ 1.25rem ไฟล์ออกแบบบอกระยะห่างภายใน 80 px และ 24 px ชื่อเรื่อง 56 px และย่อหน้านำ 20 px คุณพิมพ์ 5 แล้วอ่านได้ 80 px พิมพ์ 1.5 แล้วอ่านได้ 24 พิมพ์ 3.5 แล้วอ่านได้ 56 พิมพ์ 1.25 แล้วอ่านได้ 20 ทั้งสี่ตรงกัน งานที่สร้างจึงตรงตามแบบ หากชื่อเรื่องเป็น 3.25 rem คุณจะอ่านได้ 52 และเห็นความแตกต่างก่อนที่มันจะถึงนักออกแบบ

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

ก่อนแปลง

หาค่าฐาน: กฎรากในสไตล์ชีต หรือขนาดที่คำนวณแล้วในเครื่องมือสำหรับนักพัฒนา

ระหว่างแปลง

พิมพ์ค่า rem ตรวจค่าฐานที่แสดงข้างผลลัพธ์ และจดตัวเลขพิกเซล

หลังแปลง

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

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

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

มันคือค่าเริ่มต้น ไม่ใช่กฎ ตรวจราก

ถือว่าพิกเซลเป็นค่าสุดท้าย

คำตอบใช้ได้กับค่าฐานเดียว ผู้อ่านที่มีค่าเริ่มต้นใหญ่กว่าเห็นพิกเซลที่ใหญ่กว่า

สับสน rem กับ em

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

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

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

สรุป

หากต้องการแปลง rem เป็น px ที่นี่ ให้พิมพ์ขนาดเป็น rem แล้วอ่านเป็นพิกเซลทันที โดยใช้สูตร px = rem × base ค่าฐานเริ่มที่ 16 px ซึ่งเป็นค่าเริ่มต้นของเบราว์เซอร์ และคุณเปลี่ยนให้ตรงกับ CSS ของคุณได้ การแปลงคงสัดส่วนไว้ เพราะหนึ่ง rem คือขนาดตัวอักษรของรากไม่ว่าจะเป็นเท่าใด และไม่อาจรู้การตั้งค่าของผู้อ่านของคุณ ตัวเลขจึงถูกต้องเฉพาะกับค่าฐานในช่อง ตารางค่าที่พบบ่อย ตั้งแต่ 0.5 rem ที่ 8 px ถึง 4 rem ที่ 64 px ช่วยให้คุณอ่านสไตล์ชีตได้ในพริบตา ไม่มีสิ่งใดถูกอัปโหลด