แปลง vw เป็น px Viewport width ↔ Pixels ฟรี ออนไลน์ ปลอดภัย

เหตุใดจึงแปลง vw เป็น px

สไตล์ชีตเขียนว่า font-size: 5.2vw ที่หัวเรื่องหลัก margin-top: 8vw ที่ส่วนหนึ่ง และ width: 42vw ที่รูปภาพ ค่าเหล่านี้ยืดหยุ่นได้ และไม่ได้บอกว่าบนหน้าจอจริงเป็นอย่างไร หัวเรื่องบนโทรศัพท์ใหญ่แค่ไหน รูปภาพบนแล็ปท็อปกว้างเท่าใด ระยะขอบดูพอดีที่ 1920 พิกเซลหรือไม่ เพื่อหาคำตอบ คุณแปลง vw เป็น px คือคูณตัวเลขด้วยความกว้างของหน้าต่างแล้วหารด้วยหนึ่งร้อย และอ่านคำตอบในหน่วยที่นักออกแบบ ผู้ทดสอบ และลูกค้าใช้ นี่คือสิ่งที่คุณทำเมื่อตรวจโค้ดแบบยืดหยุ่น ตรวจงานที่สร้างเทียบกับแบบจำลอง หรืออธิบายให้เพื่อนร่วมงานฟังว่าเหตุใดหัวเรื่องจึงดูเล็กบนหน้าจอแคบ

สิ่งที่ทำให้การแปลงนี้ต่างจาก rem หรือ em คือตัวคูณเป็นตัวหน้าต่างเอง หนึ่ง vw คือหนึ่งในร้อยของความกว้างวิวพอร์ต ดังนั้น 5.2vw จึงเป็น 52 px ในหน้าต่างกว้าง 1000 px เป็น 18.7 px ในโทรศัพท์กว้าง 360 px และเป็น 99.8 px บนจอภาพกว้างขนาด 1920 ไม่มีค่าเริ่มต้นให้อิง และความกว้างเปลี่ยนเมื่อผู้อ่านหมุนโทรศัพท์หรือลากหน้าต่าง ตัวแปลงจึงถามความกว้าง แสดงไว้ข้างคำตอบ และเริ่มต้นที่ 1440 px ซึ่งเป็นความกว้างที่มักใช้วาดแบบ

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

สูตรและความกว้าง

px เท่ากับ vw คูณความกว้าง หารด้วยหนึ่งร้อย

สูตรคือ px = vw × width ÷ 100 ที่ความกว้าง 1440 px ค่า 10 vw กลายเป็น 144 px, 5 vw กลายเป็น 72 px และ 1.667 vw กลายเป็น 24 px หน้านี้พิมพ์ความกว้างไว้ข้างผลลัพธ์ ดังนั้นบรรทัดอย่าง 10 vw = 144 px (1440 px) จะบอกคุณว่าสมมติอะไรไว้ หากต้องการดูหน้าจออื่น ให้เปลี่ยนความกว้างแล้วอ่านผลลัพธ์อีกครั้ง

ความกว้างที่ควรลอง

ชุดที่ควรตรวจคือ 360 หรือ 390 สำหรับโทรศัพท์ 768 สำหรับแท็บเล็ตแนวตั้ง 1024 สำหรับแล็ปท็อปขนาดเล็ก 1440 สำหรับแล็ปท็อปหรือเดสก์ท็อปทั่วไป และ 1920 สำหรับจอภาพ full-HD พิมพ์แต่ละค่าในช่องความกว้างแล้วจดผลลัพธ์ ห้าค่าที่อ่านได้แสดงช่วงทั้งหมดของค่าหนึ่ง และค่าสุดโต่งใดก็ตามจะโดดเด่นขึ้นมา

ใช้ความกว้างของหน้าต่างจริง

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

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

รักษาสัดส่วนของหน้าจอ

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

ให้ค่าเริ่มต้นไม่ได้

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

การปัดเศษ

การคูณด้วยความกว้างแล้วหารด้วย 100 อาจให้ทศนิยม 6.67 vw ที่ 1440 px คือ 96.048 px เบราว์เซอร์จัดการพิกเซลเศษส่วนได้ แต่หากคุณต้องการจำนวนเต็มสำหรับไฟล์ออกแบบ ให้ปัดเศษและบันทึกไว้ว่าการปัดเศษเป็นของคุณ

การอ่านสไตล์ชีตแบบยืดหยุ่น

เลือกสามความกว้างแล้วจดผลลัพธ์

เลือกความกว้างแคบ กลาง และกว้าง เช่น 375, 1024 และ 1920 สำหรับค่า vw สำคัญแต่ละค่าในสไตล์ชีต ให้แปลง vw เป็น px ที่แต่ละความกว้างแล้วจดตัวเลขสามค่าไว้ในบันทึก หัวเรื่อง 5.2 vw ให้ 19.5, 53.2 และ 99.8 พิกเซล เมื่อมองแบบนี้ คุณจะรู้ว่าหัวเรื่องอ่านได้ที่ด้านแคบและไม่ใหญ่เกินไปที่ด้านกว้าง

มองหา clamp

โค้ดแบบยืดหยุ่นที่เขียนดีจะใส่ขีดจำกัดรอบ vw ด้วย clamp(min, preferred, max) หากคุณเห็น clamp(2rem, 1rem + 4vw, 6rem) ขนาดจะเติบโตระหว่าง 32 ถึง 96 px และคงที่ที่ปลายทั้งสองด้าน เมื่อคุณแปลงส่วน vw ให้จำไว้ว่าเป็นเพียงช่วงกลางของพิสัย และขีดจำกัดเป็นตัวตัดสินว่าเกิดอะไรที่ขอบ

ตรวจค่าสุดโต่ง

ความกว้างที่เสี่ยงคือค่าที่เล็กที่สุดและใหญ่ที่สุด ที่ 320 px หัวเรื่อง 6 vw คือ 19 px ที่ 2560 คือ 154 px หากไม่มีค่าใดดูยอมรับได้และไม่มี clamp สไตล์ชีตจำเป็นต้องมีขีดจำกัด

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

แถบเลื่อน

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

ใช้ความกว้างผิด

ผลลัพธ์ถูกต้องเท่ากับความกว้างที่คุณพิมพ์เท่านั้น หากหน้าต่างทดสอบของคุณกว้าง 1366 px และคุณแปลงที่ 1440 ทุกค่าจะคลาดไปราวห้าเปอร์เซ็นต์ อ่านความกว้างจริงจากเครื่องมือนักพัฒนา

สับสน vw กับเปอร์เซ็นต์

ความกว้าง 50% อ้างถึงความกว้างของพาเรนต์ ขณะที่ 50vw อ้างถึงหน้าต่าง ภายในคอนเทนเนอร์แคบทั้งสองต่างกันมาก ตัวแปลงให้คำตอบแบบ vw หากองค์ประกอบของคุณอยู่ในคอนเทนเนอร์ พาเรนต์อาจแคบกว่าหน้าต่าง

ลืมว่าข้อความใน vw ซูมไม่ได้

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

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

1 vw เท่ากับกี่พิกเซล

หนึ่งในร้อยของความกว้างหน้าต่าง คือ 14.4 px ที่ 1440, 10 px ที่ 1000, 3.6 px ที่ 360

50 vw เท่ากับกี่พิกเซล

ครึ่งหนึ่งของหน้าต่าง คือ 720 px ที่กว้าง 1440, 500 px ที่กว้าง 1000

เหตุใดหน้าของฉันจึงกว้างกว่าหน้าจอ

กล่อง 100vw บนหน้าที่เลื่อนได้กว้างกว่าพื้นที่ที่มองเห็นเพราะนับแถบเลื่อนรวมด้วย ให้ใช้ 100% ภายในคอนเทนเนอร์แทน

vw เหมือนกับเปอร์เซ็นต์หรือไม่

ไม่ เปอร์เซ็นต์อ้างถึงพาเรนต์ vw อ้างถึงหน้าต่าง

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

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

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

ใช้ px เป็น vw ซึ่งหารด้วยความกว้างแทนการคูณ

ค่าทั่วไปที่ความกว้างทั่วไป

ตารางในใจ

การรู้จุดอ้างอิงสักสองสามจุดช่วยให้คุณประมาณได้ก่อนใช้ตัวแปลง ที่ความกว้าง 1000 px, 1 vw คือ 10 px ทำให้การคำนวณง่ายมาก คือ 2.5 vw เป็น 25 px, 8 vw เป็น 80 px ที่ 1440 px, 1 vw คือ 14.4 px ที่ 375 px, 1 vw คือ 3.75 px ดังนั้นหัวเรื่อง 8 vw คือ 30 px เมื่อคุณแปลง vw เป็น px เพื่อตรวจอย่างรวดเร็ว ให้เริ่มจากจุดอ้างอิงเหล่านี้แล้วปรับสเกล

สามความกว้าง หนึ่งสไตล์ชีต

สมมติการ์ดที่มี width 80vw ช่องว่าง 4vw และหัวเรื่อง 6vw บนโทรศัพท์ 375 px ได้ 300 px, 15 px และ 22.5 px บนแท็บเล็ต 768 px ได้ 614 px, 30.7 px และ 46 px บนเดสก์ท็อป 1440 px ได้ 1152 px, 57.6 px และ 86.4 px การเห็นทั้งสามเคียงกันบอกคุณได้ทันทีว่าการ์ดกว้างเกินไปมากบนเดสก์ท็อปและหัวเรื่องใหญ่เกินไป และคุณน่าจะต้องการความกว้างสูงสุดและ clamp

เหนือกว่าวิวพอร์ต

หน่วยคอนเทนเนอร์

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

วิวพอร์ตเล็ก ใหญ่ และไดนามิก

บนโทรศัพท์ พื้นที่ที่มองเห็นเปลี่ยนไปเมื่อแถบที่อยู่เลื่อนหายไป สำหรับความสูง หน่วยรุ่นใหม่ svh, lvh และ dvh อธิบายวิวพอร์ตเล็ก ใหญ่ และไดนามิก สำหรับความกว้างสถานการณ์ง่ายกว่า เพราะแถบที่อยู่ไม่มีผล และ vw คงที่ นั่นเป็นอีกเหตุผลหนึ่งที่ vw เป็นหน่วยที่ปลอดภัยกว่า vh สำหรับการออกแบบแบบยืดหยุ่นบนมือถือ

เปอร์เซ็นต์ vw และกริด

ความกว้างแบบเปอร์เซ็นต์ตามพาเรนต์ vw ตามหน้าต่าง และ CSS grid กับ flexbox ตามพื้นที่ที่มี เลย์เอาต์แบบยืดหยุ่นที่ดีที่สุดมักใช้ grid และเปอร์เซ็นต์สำหรับโครงสร้าง และ vw เฉพาะตัวอักษรและระยะห่าง เพราะสิ่งเหล่านั้นได้ประโยชน์จากการตามหน้าจอโดยตรง เมื่อคุณแปลง vw เป็น px เพื่อตรวจเลย์เอาต์ ให้ถามว่า grid track จะบอกสิ่งเดียวกันได้มั่นคงกว่าหรือไม่

อธิบาย vw ให้คนที่ไม่เขียน CSS

ใช้หน้าต่างเป็นไม้บรรทัด

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

บอกว่าเหตุใดการออกแบบจึงไม่คงที่

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

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

พิกเซล CSS

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

หน่วยวิวพอร์ต

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

นิสัยที่ทำให้โค้ดแบบยืดหยุ่นเข้าใจง่าย

ใส่คอมเมนต์ค่าพิกเซล

บรรทัดอย่าง font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ ใช้คำเพียงไม่กี่คำ และช่วยผู้อ่านคนถัดไปไม่ต้องแปลงหลายครั้ง

เก็บความกว้างของแบบไว้ที่เดียว

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

ใช้ vw อย่างประหยัด

รายการค่า vw สั้น ๆ คิดตามได้ง่าย สไตล์ชีตที่ทุกอย่างเป็น vw ไม่ง่าย เก็บไว้สำหรับตัวอักษรแสดงผล ช่องว่างใหญ่ และงานภาพ

ทดสอบกับอุปกรณ์จริงเมื่อสำคัญ

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

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

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

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

สมมติผู้ทดสอบรายงานว่าหัวเรื่องหลักอ่านยากบนโทรศัพท์เครื่องเล็ก สไตล์ชีตเขียนว่า font-size: 5.2vw โดยไม่มีขีดจำกัด คุณแปลง vw เป็น px ที่ 360 และอ่านได้ 18.7 px ที่ 768 อ่านได้ 39.9 px ที่ 1440 อ่านได้ 74.9 px ที่ด้านแคบ หัวเรื่องใหญ่กว่าข้อความเนื้อหาเพียงเล็กน้อย และไม่อ่านเป็นหัวเรื่องอีกต่อไป คุณเสนอ clamp(2rem, 1rem + 4vw, 5rem) ซึ่งให้ 32 px ที่แคบที่สุด ประมาณ 51 px ที่ 768 และ 5rem คือ 80 px ที่กว้างที่สุด ผู้ทดสอบยืนยันว่าตอนนี้อ่านได้ดี และหัวเรื่องยังปรับสเกลอยู่

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

ก่อนแปลง

เลือกความกว้างที่คุณสนใจ จากเครื่องมือนักพัฒนาหรือจากรายการอุปกรณ์เป้าหมายของคุณ

ระหว่างแปลง

พิมพ์ค่า vw และแต่ละความกว้างตามลำดับ และจดพิกเซลที่แสดงข้างฐาน

หลังแปลง

ดูค่าสุดโต่ง หากขนาดเล็กหรือใหญ่เกินไปที่ปลายด้านใดด้านหนึ่ง ให้เพิ่มขีดจำกัดด้วย clamp()

ข้อผิดพลาดทั่วไป

สมมติว่ามีคำตอบเดียว

ค่า vw มีขนาดพิกเซลต่างกันในทุกความกว้าง ให้ระบุความกว้างกำกับทุกตัวเลข

ลืมแถบเลื่อน

100vw รวมแถบเลื่อนด้วย กล่องเต็มความกว้างจึงอาจล้น

กำหนดขนาดข้อความเนื้อหาด้วย vw อย่างเดียว

ซูมไม่ได้ ให้เพิ่มพจน์ rem และขีดจำกัด

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

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

สรุป

หากต้องการแปลง vw เป็น px ที่นี่ ให้พิมพ์ขนาดเป็น vw และความกว้างของหน้าต่าง แล้วอ่านผลลัพธ์เป็นพิกเซลทันที โดยใช้สูตร px = vw × width ÷ 100 ความกว้างเริ่มที่ 1440 px ซึ่งเป็นความกว้างที่มักใช้วาดแบบ แต่เป็นความเคยชินไม่ใช่มาตรฐาน จึงควรพิมพ์ค่าของคุณเอง การแปลงรักษาสัดส่วนของหน้าจอไว้ คือหนึ่ง vw เป็นหนึ่งในร้อยของความกว้างวิวพอร์ต ขนาดใน vw จึงขยายและหดตามหน้าต่าง ต่างจาก rem ตรงที่ vw ไม่มีค่าเริ่มต้น เพราะวิวพอร์ตคือหน้าต่างของผู้อ่านกว้างเท่าใดก็เท่านั้น สำหรับข้อความ ให้ใช้ vw ร่วมกับ rem ภายใน clamp() เพื่อให้อ่านได้และซูมได้ ไม่มีการอัปโหลดอะไร