ตัวแปลงความกว้างของช่องมองภาพเป็นความสูงของช่องมองภาพอย่างรวดเร็ว.

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

ช่วยให้คุณแปลงค่า VW เป็น VH ได้อย่างรวดเร็ว (และในทางกลับกัน) และมั่นใจได้ว่าอัตราส่วนของหน้า ฮีโร่ และวัตถุเต็มหน้าจอของคุณสมดุลกัน.

VW (ความกว้างของช่องมองภาพ) คืออะไร?

ความกว้างของช่องมองภาพ VW ย่อว่า CSS โฟล์คสวาเกน.

เป็นการวัดแบบสัมพันธ์ซึ่งกำหนดเป้าหมาย 1 เปอร์เซ็นต์ของความกว้างของช่องมองภาพของเบราว์เซอร์ – ความกว้างของพื้นที่ที่มองเห็นได้บนเว็บเพจในเบราว์เซอร์.

ตัวอย่างเช่น:

• 1vw = 1% ของความกว้างช่องมองภาพ
• 100vw = ขนาดของช่องมองภาพทั้งหมด.

มีประโยชน์ในการออกแบบเว็บแบบ Responsive เนื่องจากสามารถแสดงองค์ประกอบที่มีขนาดแตกต่างกันโดยอัตโนมัติเมื่อปรับขนาดเว็บเบราว์เซอร์ นักออกแบบมักใช้ VW เพื่อ:

• พัฒนาแบบอักษรแบบไดนามิกและตอบสนองต่อขนาดหน้าจอ.
• ระบุความกว้างของแบนเนอร์หรือคอนเทนเนอร์.
• เหมือนกันแม้ว่าจะมีมากกว่าหนึ่งอุปกรณ์ก็ตาม.

VW อนุญาตให้มีการจัดวางรูปลักษณ์ที่สมดุลเพื่อแสดงบนโทรศัพท์มือถือขนาดเล็กหรือจอแสดงผล 4K.

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

ความสูงของช่องมองภาพซึ่งเป็น 1 เปอร์เซ็นต์ของเบราว์เซอร์ ความสูงของหน้าต่างย่อว่า วีเอช.

ตัวอย่างเช่น:

• 1vh = 1% ของความสูงของช่องมองภาพ
• Vh = ความสูงของช่องมองภาพทั้งหมด.

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

การใช้งานทั่วไปสำหรับ VH ได้แก่:

• ความสูงของแต่ละส่วน (ความสูง: 100vh;)
• การจัดหาสิ่งหนึ่งให้กับอีกสิ่งหนึ่ง.
• การก่อตัวของการตอบสนองโมดอลหรือการซ้อนทับ.

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

VW และ VH ถูกสร้างขึ้นจากมิติต่างๆ (ความกว้างและความสูง) ดังนั้นการหมุนและการถอยหลังจึงจำเป็นต้องมีข้อมูล เกี่ยวกับความกว้างและความสูง ของช่องมองภาพที่มีอยู่ ความสัมพันธ์นั้นเรียบง่าย:

ค่า VH = ค่า VW × ความกว้างของช่องมองภาพ / ความสูงของช่องมองภาพ

หรือกลับกัน:

ค่า VW = ค่า VH × ความสูงของช่องมองภาพ / ความกว้างของช่องมองภาพ

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

สมมติว่าคุณกำลังวางแผนให้มีความกว้าง 1,440 พิกเซลและมีความสูง 900 พิกเซล.

คุณต้องการแปลง 50vw เป็น VH.

วีเอช = 50 × 1440 / 900​ วีเอช = 50 × 1.6 = 80วีเอช

ดังนั้น, 50vw เท่ากับ 80vh สำหรับ 1440×900 ช่องมองภาพ.

นั่นหมายความว่าครึ่งหนึ่งของขนาดช่องมองภาพจะครอบครองความสูง 80 เปอร์เซ็นต์ของช่องมองภาพในขนาดนั้น.

การใช้ตัวแปลง VW เป็น VH (ทีละขั้นตอน).

เพื่อให้มั่นใจว่าการแปลงไฟล์เป็นไปอย่างราบรื่น ตัวแปลง VW เป็น VH ของเราได้รับการออกแบบมาให้แปลงไฟล์ได้อย่างรวดเร็ว แม่นยำ และไม่ยุ่งยาก ทำตามขั้นตอนง่ายๆ เหล่านี้:

ขั้นตอนที่ 1: เปิดเครื่องมือ

เปิด เครื่องแปลง VW เป็น VH หน้าและเปิด toolsmate.online หน้าหนังสือ.

ขั้นตอนที่ 2: ป้อนค่าของคุณ

ตัวเลข (เช่น 25vw) ที่ต้องการแปลงเป็น VW จะถูกป้อนลงในกล่องอินพุต VW.

3. จัดหาขนาดช่องมองภาพ (ทางเลือก)

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

ขั้นตอนที่ 4: รับผลลัพธ์ทันที

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

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

ควรคัดลอกและวางสิ่งนี้ลงใน CSS ของคุณ การออกแบบแบบตอบสนองของคุณจะคงสัดส่วนที่สมบูรณ์แบบไม่ว่าอุปกรณ์จะมีขนาดเท่าใดก็ตาม.