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

ทำไมนักออกแบบและนักพัฒนาจึงแปลง px เป็น rem

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

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

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

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

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

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

16 มาจากไหน

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

เทคนิค 62.5% และเหตุผลที่คนใช้

สไตล์ชีตบางแห่งตั้งขนาดรากเป็น 62.5% ซึ่งทำให้ 1 rem เท่ากับ 10 px บนเบราว์เซอร์ค่าเริ่มต้น ดังนั้น 24 px จึงเป็น 2.4 rem พอดี และคิดเลขในใจได้ง่าย วิธีนี้ใช้ได้ แต่มีต้นทุน: ทั้งหน้าขึ้นอยู่กับเปอร์เซ็นต์นั้น และส่วนประกอบใดที่คาดว่าค่าฐานเป็น 16 จะออกมาเล็กเกินไป หากโปรเจกต์ของคุณทำเช่นนี้ ให้พิมพ์ 10 ในช่องค่าฐานของหน้านี้ แล้วทุกตัวเลขจะตรงกับ CSS ของคุณ

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

รักษาสัดส่วนไว้

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

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

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

การปัดเศษ

การหารด้วย 16 ให้ผลลัพธ์เรียบร้อยสำหรับหลายขนาดที่พบบ่อย (16, 24, 32, 48, 64) และทศนิยมไม่รู้จบสำหรับขนาดอื่น (10 px คือ 0.625 rem; 13 px คือ 0.8125) หน้านี้ให้จำนวนหลักเท่าที่ตัวเลขต้องการ และคุณตัดสินใจว่าจะเก็บกี่หลักในสไตล์ชีต เบราว์เซอร์จัดการทศนิยมยาวได้โดยไม่มีปัญหา แต่ค่าที่ปัดแล้วอย่าง 0.8125rem อ่านและดูแลรักษาง่ายกว่าค่าที่มีสิบหลัก

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

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

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

สเกลที่สร้างบน rem

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

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

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

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

ตรวจสอบค่าฐาน

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

คัดลอกค่า rem

อ่านตัวเลขและใช้ใน CSS ของคุณ โดยเขียนหน่วยไว้หลังตัวเลข: font-size: 1.5rem อย่าลืมหน่วย เพราะตัวเลขเปล่าๆ มีความหมายต่างออกไปใน property ส่วนใหญ่

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

พิกเซล CSS ไม่ใช่พิกเซลของหน้าจอคุณ

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

ทำไมจึงมี rem

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

ที่ที่คุณพบ rem ในทางปฏิบัติ

ตัวอักษร

ข้อความเนื้อหามักเป็น 1 rem หัวข้อ 1.25 ถึง 3 rem ตัวอักษรเล็กๆ 0.75 ถึง 0.875 rem การเขียนเป็น rem ทำให้ผู้อ่านขยายทั้งหน้าได้ด้วยการเปลี่ยนการตั้งค่าเบราว์เซอร์ข้อเดียว

ระยะห่างและเลย์เอาต์

margin, padding และ gap เป็น rem รักษาพื้นที่ว่างให้เป็นสัดส่วนกับตัวอักษร เมื่อข้อความโตขึ้น พื้นที่รอบๆ ก็โตตาม และเลย์เอาต์ยังคงสมดุล แทนที่จะอัดตัวอักษรใหญ่ลงในกล่องเดิม

Media query

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

สิ่งที่ควรเก็บเป็นพิกเซล

เส้นขอบบางเฉียบ เงากล่อง และไอคอนเส้นบางมักดูดีที่สุดที่ขนาดพิกเซลคงที่ เพราะเส้นขอบ 0.0625rem ที่โตเป็น 0.1rem เมื่อข้อความใหญ่ไม่ช่วยใครเลย ใช้ rem กับสิ่งที่ควรปรับขนาด และใช้พิกเซลกับสิ่งที่ไม่ควร

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

ลืมว่าค่าฐานไม่ได้เป็น 16 เสมอไป

หากโปรเจกต์ตั้ง html { font-size: 62.5% } หรือใช้ขนาดรากแบบลื่นไหล ตัวคูณจะต่างออกไป ตรวจดูสไตล์ชีตก่อนที่คุณจะเชื่อตัวเลขจากตัวแปลงใดๆ รวมถึงตัวนี้

แปลงขนาดรากเอง

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

ใช้ rem ในส่วนประกอบที่ตั้งขนาดตัวอักษรของตัวเอง

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

ผสมหน่วยโดยไม่มีแผน

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

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

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

หนึ่ง บนเบราว์เซอร์ค่าเริ่มต้น สิบหกหารด้วยค่าฐานสิบหก

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

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

ทำไมผลลัพธ์ของฉันจึงต่างจากเว็บไซต์อื่น

น่าจะเป็นเพราะค่าฐานต่างกัน ตรวจดูช่อง: บางเครื่องมือสมมติ 10 บางอันสมมติ 16 บางอันสมมติ 14 หน้านี้แสดงค่าฐานไว้ข้างผลลัพธ์

ต้องปัดเศษหรือไม่

ไม่ เบราว์เซอร์รับทศนิยมยาวได้ ปัดเฉพาะเพื่อให้อ่านง่าย

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

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

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

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

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

ตัดสินใจเลือกค่าฐานสำหรับโปรเจกต์และยึดตามนั้น

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

แปลงในขั้นตอนออกแบบ ไม่ใช่ในนาทีสุดท้าย

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

พิจารณาหน่วยวิวพอร์ตด้วย

สำหรับหัวข้อที่ต้องเต็มหน้าจอ px เป็น vw แสดงขนาดเป็นสัดส่วนของวิวพอร์ต มันปรับขนาดต่างจาก rem และทั้งสองมักถูกใช้ร่วมกัน

นิสัยที่ทำให้แปลง px เป็น rem ง่ายขึ้น

จำตารางการแปลงไว้ในหัว

ที่ค่าฐาน 16 จุดยึดไม่กี่จุดครอบคลุมงานส่วนใหญ่: 4 px คือ 0.25 rem, 8 px คือ 0.5, 12 px คือ 0.75, 16 px คือ 1, 24 px คือ 1.5 และ 32 px คือ 2 เมื่อแบบจำลองให้ค่าระหว่างนั้น คุณประมาณได้ก่อนที่จะแปลง px เป็น rem บนหน้านี้ และใช้ตัวแปลงเพื่อยืนยันเท่านั้น หลังจากไม่กี่สัปดาห์คุณจะรู้ตารางโดยไม่ต้องมอง

ให้ระบบการออกแบบทำงานแทน

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

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

บรรทัดอย่าง padding: 1.25rem; /* 20px */ ใช้เพียงไม่กี่ตัวอักษรและช่วยให้นักพัฒนาคนถัดไปไม่ต้องหยิบเครื่องคิดเลข มันยังบันทึกด้วยว่าคุณสมมติค่าฐานอะไร ซึ่งช่วยหากขนาดรากถูกเปลี่ยนในภายหลัง

ทดสอบด้วยการตั้งค่าเบราว์เซอร์ที่เปลี่ยนไป

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

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

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

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

สมมติว่าแบบจำลองให้ชื่อการ์ดขนาด 28 px, padding ของการ์ด 20 px และช่องว่างระหว่างการ์ด 12 px และโปรเจกต์ของคุณใช้ค่าฐานเริ่มต้น 16 px คุณพิมพ์ 28 และอ่านได้ 1.75 rem พิมพ์ 20 และอ่านได้ 1.25 rem พิมพ์ 12 และอ่านได้ 0.75 rem ในสไตล์ชีตคุณเขียน font-size: 1.75rem, padding: 1.25rem และ gap: 0.75rem ผู้เข้าชมที่เพิ่มขนาดข้อความเบราว์เซอร์เป็น 20 px เห็นการ์ดใบเดิมที่ขยายขึ้นหนึ่งในสี่: ชื่อเป็น 35 px, padding เป็น 25 px และช่องว่างเป็น 15 px ทั้งหมดตามสัดส่วน หากคุณเขียนเป็นพิกเซล ชื่อจะคงอยู่ที่ 28 และการ์ดจะดูผิดไป

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

ก่อนแปลง

หาค่าฐานที่ CSS ของคุณใช้ ตัดสินใจว่าขนาดใดควรปรับตาม และขนาดใดไม่ควร

ระหว่างแปลง

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

หลังแปลง

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

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

สมมติว่า 1 rem คือ 16 px เสมอ

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

ตั้งขนาดรากเป็นพิกเซล

มันเขียนทับตัวเลือกของผู้อ่าน ใช้เปอร์เซ็นต์ หรือไม่ต้องตั้ง

แปลงทุกอย่าง

ไม่ใช่ทุกขนาดที่ควรปรับ ปล่อยเส้นขอบและเงาไว้เป็นพิกเซล

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

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

สรุป

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