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

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

คุณมีรูปแบบตัวอักษร ความสูงของสิ่งต่างๆ หรือการจัดเรียงหน้าจอทั้งหมดที่ค่อนข้างพิถีพิถัน นี่คือยูทิลิตี้ที่จะทำให้ขนาด CSS แม่นยำและปรับได้ในทุกอุปกรณ์ เขา/เธอต้องออกแบบเว็บไซต์แบบ Responsive (RWD) หรือเลย์เอาต์แบบ Fluid.

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

REM (Root EM) คืออะไร?

รีเอ็ม เป็นตัวย่อที่ใช้แทนกันได้กับ root EM และหน่วย CSS ซึ่งสามารถปรับขนาดให้เข้ากับขนาดฟอนต์ขององค์ประกอบ root ได้ โดยทั่วไปแล้ว ฟอนต์เริ่มต้นของเบราว์เซอร์ใดๆ ก็ตามจะอยู่ที่ 16 พิกเซล.

ดังนั้น การออกแบบที่ใช้ 1rem เป็น 16 พิกเซล จะเป็น 1rem, 2rem เป็น 32 พิกเซล และอื่นๆ ระยะห่าง ขนาดฟอนต์ และอัตราส่วนของการออกแบบเว็บไซต์ของคุณสามารถคงที่ได้ตลอดทั้งเว็บไซต์ เนื่องจากทุกสิ่งมีขนาดเท่ากันเมื่อเทียบกับขนาดฟอนต์หลัก.

ตัวอย่าง:

html { ขนาดตัวอักษร: 16px; } h1 { ขนาดตัวอักษร: 2rem; /* เท่ากับ 32px */ }

VH (ความสูงของช่องมองภาพ) คืออะไร?

VH คือชื่อย่อของ Viewport Height เป็นหน่วยเปรียบเทียบของ CSS ที่เปลี่ยนขนาดขององค์ประกอบตามขนาดของหน้าต่างเบราว์เซอร์ (viewport).

1vh แสดงถึงความสูงของช่องมองภาพ 1 เปอร์เซ็นต์.

ดังนั้น 1vh = 9px เมื่อหน้าต่างเบราว์เซอร์มีความสูง 900ping.

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

เหตุใดจึงควรแปลง REM เป็น VH?

การแปลง REM เป็น VH จะช่วยปรับแต่งลักษณะที่อาศัยการปรับขนาดตามฟอนต์ (REM) เป็นการปรับขนาดตามช่องมองภาพ (VH).

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

กรณีการใช้งานทั่วไป:

• การพิมพ์แบบตอบสนอง: สามารถเปลี่ยนแบบอักษรหรือคอนเทนเนอร์ได้ตามขนาดของหน้าจอ.
• เค้าโครงแบบไดนามิก: นักออกแบบสร้างส่วนหัว ส่วนท้าย และส่วนต่างๆ เพื่อปรับขนาดแบบไดนามิกตามมิติของช่องมองภาพ.
• ความสอดคล้องข้ามแพลตฟอร์ม: การออกแบบหน้าจอมือถือ แท็บเล็ต และเดสก์ท็อปมีความคล้ายคลึงกัน.

กล่าวอีกนัยหนึ่ง การแปลง REM เป็น VH จะช่วยเติมเต็มช่องว่างระหว่างการปรับขนาดตามข้อความและการตอบสนองตามช่องมองภาพ และอาจช่วยให้คุณสร้างเค้าโครงที่ยืดหยุ่นและไหลลื่นได้อย่างแท้จริง.

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

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

สูตร:

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

ที่ซึ่ง:

• ค่า REM: คุณค่าของ REM ที่ต้องการ.
• ขนาดฟอนต์รูท: ขนาดตัวอักษรพื้นฐาน (ปกติคือ 16 พิกเซล).
• ความสูงของช่องมองภาพ: นี่คือจำนวนพิกเซลของความยาวหน้าจอหรือหน้าต่างเว็บเบราว์เซอร์.

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

สมมติว่า:

• ขนาดฟอนต์รูท = 16 พิกเซล
• ความสูงของช่องมองภาพ = 900 พิกเซล
• จะเป็นที่ต้องการของคุณที่สุด 2 REM ถึง VH.

ขั้นตอนที่ 1: แปลง REM เป็นพิกเซล

2 REM × 16 = 32 พิกเซล

ขั้นตอนที่ 2: แปลงพิกเซลเป็น VH

(32 / 900) × 100 = 3.56 วีเอช

✅ ดังนั้น 2 REM = 3.56 VH ช่องมองภาพสูง 900 พิกเซล.

ด้วยตัวแปลง REM ใน VH (แบบทีละขั้นตอน).

การเปลี่ยน ToolsMate REM เป็น VH Converter ไม่ใช่เรื่องยาก ทำตามขั้นตอนเหล่านี้:

ป้อนค่า REM

ใส่ตัวเลข REM ที่คุณต้องการลงในช่องป้อนข้อมูล เช่น ป้อน "2".

ขนาดฟอนต์รูท (ตัวเลือก)

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

ป้อนความสูงของช่องมองภาพ

พิมพ์ขนาดช่องมองภาพของคุณเป็นพิกเซล (เช่น 900 (หรือ 1080)).

รับผลลัพธ์ทันที

VH ที่แปลงแล้วจะถูกดูโดยอัตโนมัติ จากนั้นคุณสามารถคัดลอกและวางลงในโค้ด CSS ของคุณได้.

ทดสอบและปรับแต่ง

สำรวจระดับขนาดต่างๆ ของรากหรือความสูงของช่องมองภาพและดูว่าเค้าโครงของคุณจะปรากฏอย่างไรในหน้าจอขนาดต่างๆ.

ประโยชน์ของเครื่องแปลง REM เป็น VH.

• ความแม่นยำ: ไม่ต้องคำนวณด้วยมือ – สามารถแปลงได้ภายในสองสามวินาที.
• เหมาะอย่างยิ่งในการออกแบบที่ตอบสนอง: อาจมีประโยชน์มากเมื่อจับคู่องค์ประกอบตามแบบอักษรและตามช่องมองภาพ.
• ความสอดคล้องของอินเทอร์เฟซคอมพิวเตอร์: ควรมีรูปแบบการจัดวางที่สมส่วนไม่ว่าขนาดหน้าจอจะใหญ่แค่ไหน.
• การตั้งค่าการปรับแต่ง: การแปลงขนาดฟอนต์รูทและขนาดช่องมองภาพให้เข้ากับโลกแห่งความเป็นจริง.
• แอปพลิเคชัน: ประหยัดเวลา: เสียเวลาไปกับการเรียนคณิตศาสตร์.

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

ตารางแปลง REM เป็น VH (ตัวอย่าง)

นี่คือตารางอ้างอิงด่วนโดยอิงตามขนาดฟอนต์รูท 16 พิกเซลและความสูงของช่องมองภาพ 900 พิกเซล: