ตัวแปลง VH เป็น REM ตัวแปลง REM ความสูงของช่องมองภาพเป็นหน่วย REM.

การพัฒนาเว็บไซต์แบบ Responsive นั้นมีความต้องการความยืดหยุ่นสูง เนื่องจากหน้าจอในปัจจุบันมีขนาดไม่จำกัด นักออกแบบเว็บไซต์อย่าง VH (Viewport Height) และ REM (Root EM) จึงเลือกใช้หน่วย Flex เพื่อให้เกิดความยืดหยุ่นและความสม่ำเสมอในการจัดวาง อย่างไรก็ตาม การแปลงหน่วยทั้งสองนี้อาจสร้างความไม่สะดวก และนี่คือจุดที่ตัวแปลง VH เป็น REM ของเราจะเป็นประโยชน์.

เครื่องคิดเลขบนเว็บที่ใช้งานง่ายจะแปลค่าความสูงของช่องมองภาพ (VH) ให้เป็นค่ารูท em (REM) ได้ทันที ซึ่งสามารถนำไปใช้ในการพัฒนาการออกแบบเว็บที่ปรับขนาดได้ เข้าถึงได้ และเป็นมิตรต่อการใช้งาน.

ตัวแปลง VH เป็น REM คืออะไร?

ตัวแปลง VH เป็น REM ช่วยให้นักออกแบบและนักพัฒนาแปลงค่าความสูงของช่องมองภาพเป็นค่าขนาดฟอนต์รากได้อย่างรวดเร็ว.

VH ใช้เพื่อเสนอขนาดขององค์ประกอบโดยขึ้นอยู่กับความสูงที่มองเห็นได้ของเบราว์เซอร์ในการออกแบบเว็บแบบตอบสนอง และ REM ใช้เพื่อเสนอขนาดโดยขึ้นอยู่กับขนาดฟอนต์พื้นฐานที่ตั้งไว้ในองค์ประกอบราก HTML.

การสร้าง VH REM จะทำให้สามารถปรับเค้าโครงให้รองรับขนาดหน้าจอและแบบอักษรที่ผู้ใช้ต้องการได้อย่างยืดหยุ่น ส่งผลให้สามารถบรรลุเค้าโครงที่อ่านได้เท่าเทียมกันและมีความสมดุลทางสุนทรียศาสตร์.

การเรียนรู้เกี่ยวกับหน่วย VH และ REM.

ในตอนนี้ ถึงเวลาที่จะมาดูว่าแต่ละหน่วยหมายถึงอะไร:

1. ความสูงของช่องมองภาพ (VH)

1 VH = 1 เปอร์เซ็นต์ของความสูงของพอร์ตมุมมองของเบราว์เซอร์.

ตัวอย่างเช่น 1 VH จะสอดคล้องกับ 9 พิกเซลในกรณีที่ความสูงของช่องมองภาพคือ 900 พิกเซล.

VH จะเปลี่ยนแปลงโดยอัตโนมัติตามขนาดของหน้าต่างเบราว์เซอร์ที่แตกต่างกัน.

2. รูท EM (REM)

1 REM = ขนาดของฟอนต์ขององค์ประกอบรากใน html.

CSS อนุญาตให้เปลี่ยนขนาดฟอนต์รูทเริ่มต้นเป็น 16 พิกเซล แต่สามารถเปลี่ยนแปลงได้ในเบราว์เซอร์ส่วนใหญ่.

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

ผลที่ตามมาอีกประการหนึ่งของ REM คือการออกแบบที่คาดเดาได้มากกว่าและกระบวนการบำรุงรักษาที่ง่ายกว่ามาก โดยเฉพาะอย่างยิ่งในกรณีที่เกี่ยวข้องกับการเข้าถึงหรือการควบคุมขนาดแบบอักษร.

สูตรการแปลง VH เป็น REM

การเปลี่ยนจาก VH เป็น REM ไม่ใช่เรื่องยาก เพียงแค่รู้จำนวนพิกเซลในช่องมองภาพและขนาดฟอนต์รูท.

นี่คือสูตร:

REM = (ความสูงของช่องมองภาพเป็นพิกเซล x ค่า VH)/100)/ขนาดฟอนต์รากเป็นพิกเซล.

การแยกย่อยทีละขั้นตอน:

กำหนดความสูงของช่องมองภาพเป็นพิกเซล (เช่น window.innerHeight ใน JavaScript).

คูณความสูงด้วยค่า VH ของคุณ จากนั้นหารด้วย 100 เพื่อให้ได้ค่าพิกเซล.

นำค่าของพิกเซลดังกล่าวหารด้วยขนาดของฟอนต์รากของคุณเป็นค่าในหน่วย Rems.

การแปลงตัวอย่าง

สมมติว่า:

ความสูงของช่องมองภาพ = 800 พิกเซล

ขนาดฟอนต์รูท = 16px

คุณต้องการแปลง 10 VH เป็น REM

ขั้นตอนที่ 1: 10 VH = 10% ของ 800px = 80px

ขั้นตอนที่ 2: 80px ÷ 16px = 5 REM

ผลลัพธ์: 10 VH = 5 REM

วิธีนี้จะทำให้คุณได้คอนเทนเนอร์ VH ขนาด 10 ซึ่งจะให้ค่า REM ที่เทียบเท่ากับ 5 พร้อมช่องมองภาพขนาด 800 พิกเซลและฟอนต์รูทขนาด 16 พิกเซล.

การแปลง VH เป็น REM Converter.

หากต้องการเปลี่ยน VH ให้เป็น REM แบบเรียลไทม์ด้วยบริการออนไลน์ของเรา เพียงทำตามขั้นตอนด้านล่างนี้:

ขั้นตอนที่ 1: ป้อนค่า VH

พิมพ์จำนวนหน่วย VH ที่คุณต้องการแปลง เช่น 10.

ขั้นตอนที่ 2: พิมพ์ความสูงของช่องมองภาพ (ทางเลือก)

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

ขั้นตอนที่ 3: ตั้งค่าขนาดฟอนต์รูท

ขนาดฟอนต์เริ่มต้นคือ 16 พิกเซล อย่างไรก็ตาม หากคุณต้องการมีฟอนต์พื้นฐานตามที่ต้องการ (18 พิกเซลหรือ 20 พิกเซล) เพียงแค่ใส่ตัวเลขนั้นลงไป.

ขั้นตอนที่ 4: รับการแปลงทันที

คลิกแปลงหรือกด Enter ค่าเทียบเท่าของ REM จะแสดงโดยอัตโนมัติโดยใช้เครื่องมือนี้.

ขั้นตอนที่ 5: นำไปใช้กับ CSS ของคุณ

พิมพ์ค่าของ REM ลงในโค้ดหรือสไตล์ชีตของคุณ.

เรียบร้อย! ตอนนี้เปลี่ยน VH เป็น REM อัตโนมัติแล้ว.

ตารางแปลง VH เป็น REM

ตารางด้านล่างนี้ให้ข้อมูลอ้างอิงอย่างรวดเร็วสำหรับทั่วไป การแปลง VH เป็น REM, สมมติว่าเป็นค่าเริ่มต้น ความสูงของช่องมองภาพ 1,000 พิกเซล และก ขนาดฟอนต์ราก 16px.